Question

我有一个2列布局，其中左列是固定的，右列是启用滚动的。我已将overflow: hidden;设置为body，因为我不想滚动正文。但是在某种程度上可以用文本滚动我的第二列而不直接将光标移动到它（通过mousewhell全局滚动）？这是小提琴：https://jsfiddle.net/ketysek/4ysm4h0f/

Answer 1

@Fission的回答是正确的。

这个答案适用于旧浏览器支持。

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;
}

Answer 2

您可以将onwheel事件绑定到左列，然后滚动右列。查看updated fiddle here.

document.getElementsByClassName('left')[0].onwheel = function(event) {
  document.getElementsByClassName('right')[0].scrollTop += 10 * event.deltaY;
}

Answer 3

基本上我认为你不能顺利地做这件事，但如果我尝试创造性你可以将“wheel”事件分配给页面正文，并在你想要滚动的文本中添加锚点，并在函数内部照顾轮子事件移动到那个锚点。

识别车轮方向，请阅读：Javascript - Detecting scroll direction

是否有可能在没有mouseenter的情况下滚动特定的div

3 个答案: