Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.04.2014, 16:04
Аспирант
Отправить личное сообщение для Iktash Посмотреть профиль Найти все сообщения от Iktash
 
Регистрация: 03.07.2012
Сообщений: 43

Запретить скрол
Всем привет. Хочу повторить эффект прокрутки как тут:
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();
	    };
Ответить с цитированием
  #2 (permalink)  
Старый 02.04.2014, 07:22
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

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

Цитата:
document.onmousewheel = function (e) {
  e.preventDefault();

}

Последний раз редактировалось Erolast, 02.04.2014 в 07:24.
Ответить с цитированием
  #3 (permalink)  
Старый 02.04.2014, 08:38
Аспирант
Отправить личное сообщение для Iktash Посмотреть профиль Найти все сообщения от Iktash
 
Регистрация: 03.07.2012
Сообщений: 43

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 в 08:47.
Ответить с цитированием
  #4 (permalink)  
Старый 02.04.2014, 12:00
Аспирант
Отправить личное сообщение для Iktash Посмотреть профиль Найти все сообщения от Iktash
 
Регистрация: 03.07.2012
Сообщений: 43

Проблема решилась использованием плагина 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; //отключить скрол
    });


Так все работает.
Ответить с цитированием
  #5 (permalink)  
Старый 02.04.2014, 12:15
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

А, ну так 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 );

Последний раз редактировалось Erolast, 02.04.2014 в 12:19.
Ответить с цитированием
  #6 (permalink)  
Старый 02.04.2014, 15:35
Аспирант
Отправить личное сообщение для Iktash Посмотреть профиль Найти все сообщения от Iktash
 
Регистрация: 03.07.2012
Сообщений: 43

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как запретить js код. Vladislav Общие вопросы Javascript 3 23.02.2013 17:03
Как запретить отмену выделения текста от клика мышью? Маэстро Internet Explorer 0 03.04.2012 21:21
Запретить вызов функции более 1 раза в секунду asdasd Общие вопросы Javascript 11 29.03.2012 15:22
Как можно в DIV_е с включенным contentEditable запретить использовать <SCRIPT> и <A>? Маэстро Events/DOM/Window 11 02.07.2011 20:00
Помогите сделать скрол изображения Ivanishin Элементы интерфейса 12 01.02.2010 22:15