Как ограничить прокрутку скролла до определенной высоты?

Question

[PressOff]

доброго времени суток!

задача ограничить скролл после отрытия модального окна у тега "body".

overflow hidden не предлагать, уже реализовано и известно как делать.

собственно код:

var modal = document.getElementById("mymodal");
var btn = document.getElementById("btn_modal_window");
var close = document.getElementsByClassName("close_modal_window")[0];
var body = document.getElementById('body');
var blocks = document.getElementById("block_three_to_footer_block");

btn.onclick = function () {
    modal.style.display = "block";
//    body.style.overflow = "hidden";
    blocks.style.display = "none";
    
    $("html").scroll(function(){
        var n = "";
        var s = $("html").scrollTop(n);
        if( n > 100 ){
           $("html").scrollTop(100);
        }
    });
}

close.onclick = function () {
    modal.style.display = "none";
//    body.style.overflow = "auto";
    blocks.style.display = "block";
}

window.onclick = function(event) {
    if(event.target == modal) {
        modal.style.display = "none";
//        body.style.overflow = "auto";
        blocks.style.display = "block";
    }
}

Answer 1

[Максим Морев]

Здравствуйте.
overflow: hidden со своей задачей замечательно справляется, если выкинуть старые iУстройства.
Если озаботиться надо и ими, то втащите body-scroll-lock или просто в сорцах посмотрите, что они делают помимо overflow: hidden (немного всего), и адаптируйте к своему проекту.

Comments

[PressOff]

К сожалению это не решение задачи с ограничем скрула по оси y. В задаче задание чтобы скрулл ниже определённого момента при модальном окне не крутился.

[Максим Морев]

PressOff, у вас при открытом модальном окне доступна прокрутка основной страницы, и надо её ограничить?

[PressOff]

Максим Морев, да

[Максим Морев]

PressOff, событие скролла нельзя запретить.
Ваши варианты:
1) Вот тут пример. От себя добавлю, что нужно ещё учесть прокрутку при помощи нажатия средней клавиши мыши, там не учтено. Ну и от прокрутки за ползунок справа ничего не спасает, если контент напрямую в body лежит и используется стандартный скролл.
2) Можно самостоятельно отправлять пользователя при попутке скроллить до максимально ему доступного через window.scrollTo(), но скорее всего будет дёргано и некрасиво.
3) Можно физически на время появления модалки завернуть "запрещённые" секции в один div и дать ему display: none; , а после скрытия окна вернуть как было.

Я бы, пожалуй, выбрал третий вариант. Но задачу не вижу - сами решите, других вариантов у вас нет.

А вообще это такой себе паттерн. Нужно делать так, чтобы через модальный контент нельзя было взаимодействовать со страницей внутри, то есть запретить скролл. Но, надеюсь, у вас там какая-то бешеная дизайнерская задумка, чтобы такое было оправдано..

[PressOff]

Максим Морев, спасибо, но третий вариант уже тоже реализован и не принимается.

[Максим Морев]

PressOff, ну страдайте тогда, чё, убеждая себя или клиента в том, что так сделать нельзя. Или сделайте скрин страницы в момент открытия окна через html2canvas, заблокируйте body и картинку воткните в контейнер модельного окна, но это работает крайне медленно, да и вообще шизофрения в последней стадии

[Пашенька]

PressOff, на событие скролла, проверяйте текущую позицию, если она достигла той самой определенной, задавайте body overflow:hidden. Если предыдущее условие справедливо и скроллят вверх, убирайте overflow:hidden с бади. Это добавит горизонтального дёрганья странице в размере ширины скроллбара и вообще всё это какой-то бред. Неясно зачем вам это нужно, при нормальных обстоятельствах так не делают.

[PressOff]

Пашенька, в коде есть та самая проверка и не работает.

[Пашенька]

PressOff, нет, в вашем коде какой-то абсурд написан, неудивительно, что оно не работает.

[Максим Морев]

Пашенька, в который раз убеждаюсь, что одна голова хорошо, а две лучше. Думал, что все варианты перебрал, особенно после шизофренического))