Запретить скролл вверх

#javascript #html #jquery #css

Существует ли возможность с помощью js/jquery сделать так, чтобы пользователь мог
прокручивать страницу вниз, а вверх не мог ? Если можно, то подскажите, а то не знаю
даже, как это загуглить
    

Ответы

Ответ 1

Можно начать с этого:

$('body').on({
    'mousewheel': function(e) {  
    if(e.originalEvent.wheelDeltaY>0){
        e.preventDefault();
        e.stopPropagation();}
    }
})


Но можно все равно прокручивать страницу с помощью скроллбара. Поэтому пойдет еще
вариант:

var stmax=0;
window.addEventListener("scroll", function(){
     var st = window.pageYOffset || document.documentElement.scrollTop; 
     if(st>stmax){
          stmax=st
     }else{
          $(window).scrollTop(stmax);
     }
})


Ответ 2

Думаю тут стоит поставить слушателя на событие scroll для window, затем смотреть
знак дельты прокрученных пикселей. Что-нибудь вроде:

window.addEventListener("scroll", scrollHandler);

var scrollPrev = 0; 
var scrollDelta = 0;

function scrollHandler(e) {
    scrollDelta = e.target.scrollTop - scrollPrev;
    if(scrollDelta < 0){
      e.target.scrollTop = scrollPrev ;
    }
    scrollPrev = e.target.scrollTop;
}


Ответ 3

Рекомендую разверстать Вам страничку без скролл бара вовсе. Подготовить адаптивные
блоки на всю ширину-высоту экрана. В низу добавить кнопку вниз. По клике по ней и скроллу
вниз скрывать активный блок и отображать следующий.

Примеров анимаций в интернете предостаточно, вот пример кода:

var activeBlock = 0;
var scrollPos = $(window).scrollTop();
$(document).ready(function(){
    $(window).scroll(function(){
        var bo = $(window).scrollTop();
        if (bo > scrollPos)
            // scroll bottom
            $(".block"+activeBlock).addClass('hidden');
            activeBlock++;
            $(".block"+activeBlock).removeClass('hidden');
        } else {
            // scroll top
        }
        scrollPos = bo;
    });
});