Как реализовать disabled scroll на определённом месте?

Question

[PressOff]

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

Нашёл такую штуку:

;(function(){
  
    window.addEventListener('scroll', scrollHandler, false);
    window.addEventListener('touchmove', scrollHandler, false);
    window.addEventListener('mousewheel', scrollHandler, false);
  
    function scrollHandler(e) {
       var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
       console.log(scrollTop); 
       if(scrollTop > 500) { // после 500px scroll не реагирует
          e.preventDefault();
          e.stopPropagation();
          return false; 
      }   
    }  
})();

взял от сюда: https://www.cyberforum.ru/javascript/thread1221460.html

как её подкрутить к модальному окну?

Модальное окно:

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");

//console.log(blocks);




//        console.log(body);

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

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

        window.addEventListener('scroll', scrollHandler, false);
        window.addEventListener('touchmove', scrollHandler, false);
        window.addEventListener('mousewheel', scrollHandler, false);

        function scrollHandler(e) {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            console.log(scrollTop); 
            if(scrollTop > 400) { // после 500px scroll не реагирует
                e.preventDefault();
                e.stopPropagation();
                return false; 
            }   
        }  
    };

}

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

В таком виде не работает...

Answer 1

[Арсений Матыцин]

Вот это body.style.overflow = "hidden" как раз и определяет отсутствие скролла.
Есть не заносить фиксированные размеры, то так можно вырубить скролл именно на этом самом месте. Осталось словить момент, когда это надо сделать.

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

Comments

[PressOff]

Да вот в том то и дело что скрул нужен, но только до определённого момента.
К примеру модалка большая, а при хиден срулл всю не видно.

[Арсений Матыцин]

*скрулл недоумевает, каким он тут боком*

К примеру модалка большая, а при хиден срулл всю не видно.

Это проблема криво сверстанной модалки, а не логики «body→hidden».

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

Арсений Матыцин, да вчера уже обсуждали то же самое, сложный случай. Хотя сейчас играет новыми красками после

К примеру модалка большая, а при хиден срулл всю не видно.

PressOff, есть ощущение, что вы пытаетесь удалить зуб через анальное отверстие, иначе говоря сами себе придумали проблему и мужественно её решаете. Может расскажете уже, какая перед вами стоит задача, а не ваши шаги для того, чтобы её решить?

[Арсений Матыцин]

Максим Морев, дублирование вопроса. Да, это то, что я люблю)

[Пашенька]

Максим Морев, сейчас ещё круче: на каждое возникновение события скролл навешивается всё больше и больше обработчиков.

PressOff, Всякий раз, когда вы добавляете обработчик(именно addEventListener) внутри какого-то события или в цикле, задайте себе вопрос: а точно ли я полностью понимаю, что делаю? Если ответ «нет», остановитесь, пока Хром не съел всю оперативку.

Я же с товарищем написали вам алгоритмы, которые осталось лишь записать на JavaScript языке, а вы просто, в каком-то найденном в интернете коде, видите похожие слова и заявляете, что это не работает.
Вы просто отменили стандартное поведение обозревателя при событии scroll. Безвозвратно. А кто их восстанавливать будет? Как теперь это должно работать?