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>

ilya_ 10.07.2012 15:56
Наверное я еще не достаточно умный для такого трюка. Вы посмотрели сайт в первом сообщении? Я вижу там тоже где-то position fixed задается. Можете объяснить как это работает чуть подробнее...))

Deff 10.07.2012 16:09 
<style>
#foo{
  position:fixed;
  left:50%;
  margin-left:-100px;
  top:12%;
  height:100px;
  width:200px;
  background-color:#F8F8F8;
  border:outset 2px;
  transition-property:top;
  -webkit-transition-property:top;
  -moz-transition-property:top;
  -o-transition-property:top;
  -ms-transition-property:top;

   transition-duration: 0.96s;
  -webkit-transition-duration: 0.96s;
  -moz-transition-duration: 0.96s;
  -o-transition-duration: 0.96s;
  -ms-transition-duration: 0.96s; /* IE9+ */
}

</style>
<div id=foo>блаблаблабла блаблаблаблаблаблаблабла я див</div>
<script type="text/javascript">
document.write('<style>#foo{top:45%}</style>')
</script>

Jeer 14.03.2013 09:42
Добрый день!
Первый пример интересен, но мне недостаточно и интересует такая ситуация: если курсор над дивом со скроллингом, то скролл должен работать только у этого дива и не должен работать глобальный скролл. Потому что в обычной ситуации как только прокрутка у дочернева дойдет до низу начнется прокрутка глобальная у страницы и экран уедет.
Не могли бы расширить свою функциональность на этот момент?


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