Как сделать горизонтальный скролл колёсиком мыши при наведении на блок на чистом js?

Question

[Василий]

Как сделать горизонтальный скролл колёсиком мыши при наведении на блок на чистом js ?

1. Есть блок с таблицей. Как сделать горизонтальный скролл, при прокрутке калёсика мыши.
2. Запретить эту прокрутку при наведении на крайний блок с лева.

Answer 1

[Василий]

Если кто-то будет искать. Вот такой рецепт нашел.

(function() {

    function scrollHorizontally(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        document.getElementById('statistic-table').scrollLeft -= (delta*10); // Multiplied by 10
        e.preventDefault();
    }
    if (document.getElementById('statistic-table').addEventListener) {
        // IE9, Chrome, Safari, Opera
        document.getElementById('statistic-table').addEventListener("mousewheel", scrollHorizontally, false);
        // Firefox
        document.getElementById('statistic-table').addEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
        // IE 6/7/8
        document.getElementById('statistic-table').attachEvent("onmousewheel", scrollHorizontally);
    }

})();

Comments

[Анатолий]

Было бы еще интересно замутить, когда есть такая прокрутка, что-то информирующее о этой функции. Например справа поверх таблицы появляется какая-то стрелка или анимация прокрутки мышкой.

[Анатолий]

А не пробовали через querySelectorAll делать?
В документе может и не одна таблица быть.

[Анатолий]

Накидал, вроде работает:

(function() {

  function scrollHorizontally(e) {
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    this.scrollLeft -= (delta*10); // Multiplied by 10
    e.preventDefault();
  }

  var elems = document.querySelectorAll('.scrollMouse');
  for (var a = 0; a < elems.length; a++) {
    elems[a].addEventListener("mousewheel", scrollHorizontally, false);     // IE9, Chrome, Safari, Opera
    elems[a].addEventListener("DOMMouseScroll", scrollHorizontally, false); // Firefox
  }

})();

[Анатолий]

Все равно как-то криво это все работает. Даже когда таблица полностью отображается, дальнейшей прокрутки вниз/вверх не наблюдается.
Надо дописать условия в функции при прокрутке:
1) вверх: видна левая часть таблицы, двигаемся вверх.
2) вниз: видна правая часть таблицы, двигаемся вниз.

[Анатолий]

Ну все сделал рабочий вариант, всем спасибо )))

(function() {

  function scrollHorizontally(e) {

    var scrollPos = this.scrollLeft;  // Сколько прокручено по горизонтали, до прокрутки (не перемещать эту строку!)

    // Горизонтальная прокрутка
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    this.scrollLeft -= (delta*10); // Multiplied by 10

    var widthElem = this.scrollWidth; // Ширина всего элемента
    var widthBrowser = document.documentElement.clientWidth;  // Ширина окна минус размер вертикального скролла


    // Прокрутка вверх, но элемент уже в крайней левой позиции, то двигаемся вверх
    if ((delta == 1 ) && (this.scrollLeft == 0)) return;
    // Прокрутка вниз, но элемент виден полностью. Или элемент до конца прокручен в правый край
    if ((widthBrowser >= widthElem) || (scrollPos == this.scrollLeft)) return;

    e.preventDefault(); // запрещает прокрутку по вертикали

  }

  var elems = document.querySelectorAll('.scrollMouse');
  for (var a = 0; a < elems.length; a++) {
    elems[a].addEventListener("mousewheel", scrollHorizontally, false);     // IE9, Chrome, Safari, Opera
    elems[a].addEventListener("DOMMouseScroll", scrollHorizontally, false); // Firefox
  }

})();