3

Подскажите, как можно реализовать scroll, где он отсутствует? Страница построена с помощью position absoluteи сколла нету... Но необходимо знать, когда пользователь крутит колесико и насколько сильно. Например, от скролла будут передвигаться блоки.
Событие window.onscroll его не обрабатывает т.к. само окно остается неподвижным...
Заранее благодарю!
Вот пример! http://www.jandk.fr/

Нашел, как реализовать на mousewheel , Но все же - есть какие-то другие способы реализовать это? (Говорят, что скоро не будут поддерживать этот метод), да и не адаптивный он...+ на touch устройствах будет каша... Очень надеюсь на вашу помощь!

    var elem = document.getElementById('container');
    if (elem.addEventListener) {
      if ('onwheel' in document) {
        elem.addEventListener("wheel", onWheel);
      } else if ('onmousewheel' in document) {
        elem.addEventListener("mousewheel", onWheel);
      } else {
        elem.addEventListener("MozMousePixelScroll", onWheel);}
    } else { // IE8-
      elem.attachEvent("onmousewheel", onWheel);}
    function onWheel(e) {
      e = e || window.event;
      var delta = e.deltaY || e.detail || e.wheelDelta;
      var info = document.getElementById('delta');
      info.innerHTML = +info.innerHTML + delta;
      e.preventDefault ? e.preventDefault() : (e.returnValue = false);}
 #container {
      width: 200px;
      height: 200px;
      border: 1px solid black;
      background: #0FF;
      overflow: auto;}
  Прокрутка: <span id="delta">0</span>
  <div id="container">
    Прокрути надо мной.
  </div>

1
  • у вас для html,body написано overflow:hidden; т.е оно обрежет всё что вылазиет и скрывает сам скроллбар , вам если нужен скролл бар то измените это свойство
    – user33274
    18 июн 2016 в 10:02

1 ответ 1

1

Ну например вы можете следить прямо за колесиком мышки. Это событие mousewheel.

Лучше всего работать с ним с помощью этого плагина: https://github.com/jquery/jquery-mousewheel

$('#my_elem').on('mousewheel', function(e) {
    // прокрутка колесика по вертикали
    console.log(e.deltaY);

    // прокрутка по горизонтали (так умеют мышки Apple например)
    console.log(e.deltaX);
});

Delta - это переменная с помощью который вы сможете понять, в какую сторону крутят колесико (меньше нуля - вверх, больше нуля вниз). И с какой силой это делают (чем больше 1, тем быстрее крутят)

3
  • Спасибо. А с тач устройствами оно работает?
    – Brave_Lime
    18 июн 2016 в 9:58
  • Не думаю, для тач устройств есть свои события: touchstart, touchend, touchmove (или pointermove для MS).
    – IonDen
    18 июн 2016 в 10:01
  • Но вообще, все же это немножко не то. Судя по вашему примеру - вам нужен Horizontal Parallax Scroll (гуглите это).
    – IonDen
    18 июн 2016 в 10:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.