Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Запретить скрол (https://javascript.ru/forum/dom-window/46197-zapretit-skrol.html)

Iktash 01.04.2014 16:04

Запретить скрол
 
Всем привет. Хочу повторить эффект прокрутки как тут:
http://www.apple.com/iphone-5c/
Использую jquery
Код:
$(document).scroll(function(e){
        e.preventDefault();
        e.stopPropagation()
        slideScroll();
        return false;
    });

Функция slideScroll() собственно крутит страну к нцжному диву вниз. Проблема с том, что нужно на время анимации запрещать скрол обычный. Сразу скажу, что различные способы, приводящие к body{overflow:hidden} не подходят, по тому, что появляется и исчезает полоса прокрутки из-за чего все содержимое неприятно дергается.
Я думал, что после return false; должно все автоматически получаться, но нет.
Пробовал отдельно так(нагуглено):
document.onmouseover = function () {
	        offScroll();
	    };

Erolast 02.04.2014 07:22

https://www.google.com/search?q=javascript+запрет+скроллин а

Цитата:

document.onmousewheel = function (e) {
  e.preventDefault();

}

Iktash 02.04.2014 08:38

Erolast, да это я то же видел. Однако виимо применяю как-то не так.
Прописываю до
$(document).ready(function(){

Не работает

Так же попробовал так:
window.onmousewheel = document.onmousewheel = window.onscroll = document.onscroll = function (e) {return false;};


Ну то есть оно в принципе не работает. Почему - не могу понять.
Так в консоли чичего, кстати:
document.onmousewheel = function (e) {
        e.preventDefault();
        console.log('test');
      }

Iktash 02.04.2014 12:00

Проблема решилась использованием плагина mousewheel

$(document).mousewheel(function(e,delta){
            if(delta < 0 && !stop_down)
            {  
                if($('body').attr('data-slide') < 4)
                {
                    stop_down = true;
                    stop_up = false;
                    ScrollNext();
                }
            }  
            if(delta > 0 && !stop_up)
            {
                if($('body').attr('data-slide') > 1)
                {
                    stop_up = true;
                    stop_down = false;
                    ScrollPrev(); 
                }  
            } 
            return false; //отключить скрол
    });


Так все работает.

Erolast 02.04.2014 12:15

А, ну так onmousewheel только в опере и IE работает. Для firefox/chrome/saphari надо событие DOMMouseScroll использовать (что плагин mousewheel и делает).
Но подобный запрет запрещает только скроллинг колесиком. То есть, прокрутка скроллбаром все равно остается. Чтобы полностью запретить прокрутку, придется скроллбар скрывать. Чтобы не прыгало, можно при этом вешать телу документа paddingRight, равный ширине скроллбара. Найти эту ширину можно вот так:
Цитата:

// создадим элемент с прокруткой
var div = document.createElement('div');
       
div.style.overflowY = 'scroll';
div.style.width =  '50px';
div.style.height = '50px';
 
// при display:none размеры нельзя узнать
// нужно, чтобы элемент был видим,
// visibility:hidden - можно, т.к. сохраняет геометрию
div.style.visibility = 'hidden';
 
document.body.appendChild(div);
var scrollWidth = div.offsetWidth - div.clientWidth;
document.body.removeChild(div);
 
alert( scrollWidth );


Iktash 02.04.2014 15:35

Спасибо. Но меня полностью устроило теперь overflow:hidden Проблема со скроллбаром решилась автоматически.
Раньше не устраивало, по тому, что я производил прокрутку по событию jquery .scroll
а оно при overflow:hidden просто не происходит.
Вот этой фразы я не смог нагуглить сутки назад: "onmousewheel только в опере и IE работает".


Часовой пояс GMT +3, время: 07:10.