Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Отключить скролл мышкой во время анимации окна (https://javascript.ru/forum/misc/29423-otklyuchit-skroll-myshkojj-vo-vremya-animacii-okna.html)

ilya_ 27.06.2012 13:18
Отключить скролл мышкой во время анимации окна
 
Привет
Подскажите как сделать такую штуку как здесь:
http://community.saucony.com/kinvara3/
а именно как сделать, что бы когда сработало событие после которого мы плавно передвигаемся к следующему сладу колесико мышки не работало, так сказать. Просто переход по слайдам сделать не сложно, но если во время анимации начать крутить колесико то все дергается, ужос в общем.)
Подскажите пожалуйста.)

devote 27.06.2012 13:35 
<div id="mydiv" style="width: 100px; height: 100px; overflow: auto">
    <div>Много данных</br>
        Много данных</br>
        Много данных</br>
        Много данных</br>
        Много данных</br>
        Много данных</br>
        Много данных</br>
        Много данных</br>
    </div>
</div>
<script type="text/javascript">

var elem = document.getElementById( 'mydiv' ); // элемент у которого нужно заблокировать скролл

if ( elem.addEventListener ) {
    elem.addEventListener( "DOMMouseScroll", elem.onmousewheel = function( e ) {
       e.preventDefault();
    }, false );
} else {
    elem.onmousewheel = function( e ) {
       window.event.returnValue = false;
    }
}
</script>

Dim@ 27.06.2012 17:13
devote,
клево, а как вернуть в обратное состояние что бы можно было прокручивать мышкой (жаль я не знаю английский надо бы выучить что бы спецификации читать)

devote 27.06.2012 17:36
Цитата:
Сообщение от Dim@
а как вернуть в обратное состояние что бы можно было прокручивать мышкой
ну можно написать спец функции типа:
function lockScroll( elem ) {
    if ( elem.addEventListener ) {
        elem.addEventListener( "DOMMouseScroll", elem.onmousewheel = function( e ) {
            e.preventDefault();
        }, false );
    } else {
        elem.onmousewheel = function( e ) {
           window.event.returnValue = false;
        }
    }
}

function unlockScroll( elem ) {
    if ( elem.removeEventListener ) {
        elem.removeEventListener( "DOMMouseScroll", elem.onmousewheel, false );
        elem.onmousewheel = null;
    } else {
        elem.onmousewheel = null;
    }
}

lockScroll( document.getElementById( 'mydiv' ) ); // заблокировать скролл
unlockScroll( document.getElementById( 'mydiv' ) ); // разблокировать скролл

Dim@ 27.06.2012 17:52
devote,
спасибо, а то я пишу и не выходит :lol: 
if ( elem.removeEventListener ) {
   elem.removeEventListener( "DOMMouseScroll", elem.onmousewheel = function( e ) {
    e.preventDefault();
   }, false );
  } else {
   elem.onmousewheel = function( e ) {
    window.event.returnValue = false;
   }
  }

ilya_ 10.07.2012 14:24
Спасибо.
А как сделать что бы эта функция вызывалась только тогда, когда прокрутка идет колесиком мыши, а когда тянут за скроллбар не вызывалась?.

ilya_ 10.07.2012 14:59
Вот, например, если я хочу что бы экран был всегда в самом верху сайта.
я пишу:

var scrollHandler = function(e){
$(window).scrollTop('0px');
}

$(window).scroll(scrollHandler);

Окно не скроллиться, почти...происходит какой-то рывок, все "мигнуло", а потом окно понимает что не надо ни куда рыпаться.) Вот как избавиться от этого "мигания".

Deff 10.07.2012 15:12
ilya_,
А нахрена скриптом когда можно css position:fixed; плюс css анимацию?

А стиль данного элемента подключать по необходимости уже скриптами ?

ilya_ 10.07.2012 15:22
Можно подробнее про то как position fixed может мне помочь?

Dim@ 10.07.2012 15:51
ilya_,
тем может помочь что при прокрутке элемент не двигается 
<style>
body{
 height:1000px;
}
</style>
<div style='position:fixed'>блаблаблаблаблаблаблаблаблаблаблабла я див</div>


Часовой пояс GMT +3, время: 23:07.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице