Are you able to send me a live link/URL to your search page so I can take a look? A screenshot of the settings for the form’s Display Results settings tab would also be useful (you need to upload the image to a sharing site and give me the link).

I think I can see the issue.

The HTML around the results looks like this:

<div class="recipe-container">
    <main class="content" id="genesis-content">
        <article class="...">...</article>
        <article class="...">...</article>
        <article class="...">...</article>
        <article class="...">...</article>
        <article class="...">...</article>
        <article class="...">...</article>
        <article class="...">...</article>
        <div class="archive-pagination pagination">...</div>
    </main>
</div>

The pagination is inside what you have defined as the Infinite Scroll container (#genesis-content).

Ideally, I would have it structered like this:

<main class="content" id="genesis-content">
    <div class="recipe-container">
        <article class="...">...</article>
        <article class="...">...</article>
        <article class="...">...</article>
        <article class="...">...</article>
        <article class="...">...</article>
        <article class="...">...</article>
        <article class="...">...</article>
    </div>
    <div class="archive-pagination pagination">...</div>
</main>

where the Ajax container would be #genesis-content

the post selector would be article

the Infinite Scroll container would be .recipe-container

Does that make sense? Hopefully, you have enough control over the template to be able to make these changes.

It would be possible, yes. You would need to code some JavaScript, but the bones of it would look like this:

(function ( $ ) {
	
	"use strict";
	
	//detects the start of an ajax request being made
	$(document).on("sf:ajaxstart", ".searchandfilter", function(){
	  console.log("ajax start");
	  //hide your pagination
	});
}(jQuery));