调整窗口大小时自动调整滚动值

Question

我正在一张一张地浏览图像。当窗口较大时，图像将移至下一个/上一个。但是，当我调整窗口大小然后滚动时，图像将被跳过。我正在寻找一种方法来保持窗口大小调整为任意大小时用于滚动的值保持不变。我该如何实现？

这是我在JSFiddle上的代码：

 var pageno = 1; //global variable  

 document.addEventListener('wheel', function(e) {
    e.preventDefault();
    
}, { passive: false });

$(document).ready(function() {

    
    /* Scroll event handler */
    $(window).bind('scroll',function(e){
        
        parallaxScroll();

    });



    document.addEventListener("keydown", function(event) {
        //console.log(event.which);
        if(event.which == "39") //Right Key keyboard
        {
    
            if(pageno == 1) 
            {
       
                $('a.SecondPage').click();
       
            }



        }
        else
        if(event.which == "37") //Left Key keyboard
        {
            

            if(pageno == 2)
            {
                $('a.FirstPage').click();
            }
            
            
        }
      })
    
    /* Next/prev and primary nav btn click handlers */
    $('a.FirstPage').click(function(){
    
        pageno= 1;
        //console.log(pageno);
        $('html, body').animate({
            scrollTop:0,
            
        }, 2000, function() {
            parallaxScroll(); // Callback is required for iOS
            
            
        });
        return false;
    });
  
    $('a.SecondPage').click(function(){
    
        pageno= 2;
        console.log(pageno);
        $('html, body').animate({
            scrollTop:500,
            
            
            
        }, 2000, function() {
            parallaxScroll(); // Callback is required for iOS

        });
        return false;
    });


    
});

/* Scroll the background layers */
function parallaxScroll(){

        var scrolled = $(window).scrollTop();

        $('#parallax-bg3').css('left',(0-(scrolled*1.0))+'px');



}

#parallax-bg3 {
    z-index: 1;
    
    position: fixed;
        width: 100%;
    padding-top: 56.25%;/* 16:9 Aspect Ratio */

    left: 0%; /* align left edge with center of viewport */

    }
    #bg3-1 {
        position: absolute;
    top: 0;
        left: 0%;

        width: 50%;
    
        
        }
        #bg3-2 {
        position: absolute;
        top: 0px;
      left: 80%;
          width: 50%;

            }

<div id="parallax-bg3">
            
            <!-- Parallax  background City -->
            <div id="parallax-bg1">
                <img  id="bg3-1" src="https://via.placeholder.com/300.png/09f/fff

C/O https://placeholder.com/" alt="First Page"/>
                <img id="bg3-2" src="https://via.placeholder.com/300/09f/fff.png

C/O https://placeholder.com/" alt="Second Page"/>

            </div>
  </div>