Изменение размера экрана вызывает проблемы

Question

У меня есть страница, где у меня есть два div, один занимает весь экран, а прокрутка разрешена только до той точки, где div все еще отображается. Таким образом, другой div не отображается, он должен становиться видимым только одним щелчком мыши. Проблема, которая у меня есть, заключается в том, что если я уменьшу размер экрана вниз, сделав его больше, при выполнении этого другого div станет видимым до тех пор, пока я не начну прокрутку снова, где он сбрасывается, а первый div снова отображает весь экран. Я не могу сделать со вторым div showhide функции из-за проблем со слайдером, который у меня там, он не работает должным образом, если я сначала скрою его, а затем покажу, так что я отключил прокрутку, если это необходимо, чтобы сделать другой div не видно. Как я могу избежать видимости этого div при увеличении экрана?

Это мой сценарий:

if (window.location.pathname == '/all') { 
    $('body').css('overflow-y', 'auto'); 

    scrollPoint = $(".magazine-section").offset().top - $(window).height(); 

    $(window).scroll(function() { 
     $(window).scrollTop() > scrollPoint ? $(window).scrollTop(scrollPoint) : ''; 
    }).scroll(); 

    $(window).resize(function() { 
     scrollPoint = $(".magazine-section").offset().top - $(window).height(); 
    }); 

    } 
    else { 
    $('body').css('overflow-y', 'hidden'); 
    } 

Answer 1

Вместо сокрытия DIV с display:none попробовать visibility:hidden Если это не работает, попробуйте использовать opacity:0

Таким образом, ваш ползунок должен работать должным образом без проблем. Проблема, вероятно, связана с display:none, которая имеет побочные эффекты (например, offsetHeight 0)