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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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