У меня есть 2 колонки, где левый столбец фиксирован, а правый столбец включен для прокрутки. Я установил overflow: hidden; на body, потому что не хочу прокручивать тело. Но возможно ли как-то прокрутить мой второй столбец с текстом без прямого перемещения к нему курсора (прокрутить его глобально с помощью mousewhell)? Вот скрипка: https://jsfiddle.net/ketysek/4ysm4h0f/

0
ketysek 8 Дек 2016 в 11:37

3 ответа

Лучший ответ

Вы можете привязать событие onwheel к левому столбцу и вместо этого прокрутить правый столбец. Проверьте обновленную скрипку здесь.

document.getElementsByClassName('left')[0].onwheel = function(event) {
  document.getElementsByClassName('right')[0].scrollTop += 10 * event.deltaY;
}
1
Fissio 8 Дек 2016 в 08:49

@ Деление ответ правильный.

Этот ответ для поддержки старых браузеров.

if (document.body.addEventListener) {
    document.body.addEventListener("mousewheel", MouseWheelHandler, false);
    document.body.addEventListener("DOMMouseScroll", 
                                    MouseWheelHandler, false);
}

else document.body.attachEvent("onmousewheel", MouseWheelHandler);

function MouseWheelHandler(e) {
    var right= document.getElementsByClassName("right")[0];
    var e = window.event || e; // old IE support
    right.scrollTop += e.deltaY * 5;
}
2
Faouzi Oudouh 8 Дек 2016 в 09:12

В основном я думаю, что вы не можете сделать это гладко, но если я попытаюсь быть креативным, вы можете назначить событие «wheel» телу страницы и добавить привязку внутри вашего текста, который вы хотите прокрутить, и внутри функции, которая заботится события колеса переместитесь на этот якорь.

Узнайте направление колеса, прочитайте это: Javascript - определение направления прокрутки

0
Community 23 Май 2017 в 12:08