假设我有两个 div：
<div id="control"></div>
<div id="view">(A scrollable list)</div>
而且我想这样做，以便当光标停在里面#control并且滚动鼠标滚轮时，#view将会滚动。无论如何要实现这一目标？
问问题
5722 次
6 回答
6
好的，快速修复对我有用。即使固定的 div 不可滚动，因为它没有超出其边界的内容，您仍然可以检测到mousewheel事件。mousewheel事件包含滚动的 x/y 维度的增量。
注意：这适用于鼠标或触控板，并且会为您提供正确的方向 (-/+)，无论反转 Y 轴设置如何（阅读：Apple 的（非）自然滚动）
因此，您可以执行以下操作：
var fixedDiv = document.querySelector('.my-fixed-div');
var scrollableDiv = document.querySelector('.my-scrollable-list');
fixedDiv.addEventListener('mousewheel', function (e) {
e.preventDefault();
scrollableDiv.scrollTop += e.deltaY;
});
于 2016-08-10T23:40:27.747 回答
2
不知道布局是什么样子
但是如果它们彼此相邻，您可以使用
#control{pointer-events : none}
并改变一些事情。
这是一个小提琴：http: //jsfiddle.net/filever10/QVRNd/
如果元素不能那么接近，这将无济于事。
它通过将控件放在列表上并禁用控件上的指针事件来工作。
于 2013-10-23T02:51:17.997 回答
0
这可能会帮助您：
文档有它的功能 onscroll。
document.onscroll=moveSetting;
假设div1要滚动并且鼠标指针应该在div2。
所以我们必须scFunc()只在鼠标位于 div2 时才执行。我们可以通过
function moveSetting(evt)
{ var div2Obj=document.getElementById('div2');
var width=div2Obj.style.width;
var border=div2Obj.style.border;
var x=evt.pageX,y=evt.pageY,
var leftChk=div2Obj.offsetLeft;
var topChk=div2Obj.offsetTop;
if(x>=leftChk && x<=(leftChk+width+border*2) && y>=topChk && y<=(topChk+width+border*2)) {
scrollFunc();
}
}
var i,j;
function scrollFunc() {
var i=document.getElementById('div1').scrollTop;
i++;
i=j-1;
document.getElementById('div1').scrollTop=i;
/* manage your code yourself to scroll div1 from here */
}
于 2012-12-24T06:49:31.310 回答
0
我对此进行了测试，我可以在元素上实现onscroll事件的唯一方法是使用“浮动”的活动滚动条。解释浮动：它的位置在距离顶部 100 像素处，当它滚动时，我们检查它是向上还是向下，然后我们将它带回原来的位置。所以请记住，您需要一个活动滚动条（元素的内部内容应该高于自身：您可以使用多个<br>等...）；
Javascript代码：
<script type="text/javascript">
var defaultScrollTop = 100; /* testing value */
window.onload = function() {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.scrollTop = defaultScrollTop; // Initialize to float
div1.onscroll = function(event) {
if (defaultScrollTop < div1.scrollTop) {
div2.scrollTop += 100; //scrollDown
} else if (defaultScrollTop > div1.scrollTop) {
div2.scrollTop -= 100; //scrollUp
}
div1.scrollTop = defaultScrollTop;
}
}
</script>
CSS：
<style>
#div1, #div2 {
max-height: 100px; /* For testing */
overflow-y: scroll;
}
</style>
所以，当你在里面滚动时div1，它会检查它是否向上/向下滚动，向上/向下滚动div2并将 div1 设置为它的默认滚动值。希望这个技巧有帮助。
PS：如果您进行一些研究，您可以使滚动条不可见（overflow:hidden因为不会有活动的滚动条而不起作用）
于 2013-01-23T21:08:49.427 回答
0
尝试以下解决方案。mousewheel您可以在 div 上监听事件并根据执行的滚动量滚动control另一个 div （使用 检索值）；viewWheelEvent.deltaY
更多信息可以在这里找到：https ://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY
var fixedDiv = document.getElementById('control'),
scrollableDiv = document.getElementById('view');
fixedDiv.addEventListener('mousewheel', function (e) {
scrollableDiv.scrollTop += e.deltaY;
console.log(scrollableDiv.scrollTop);
});#control,
#view {
width: 500px
}
#view {
height: 500px;
overflow: auto;
padding-top: 30px
}
#control {
position:fixed;
height: 50px;
background-color: red
}<div id="control">Keep your mouse here and scroll</div>
<div id="view">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>于 2016-08-18T06:38:58.387 回答
-3
看最后一个例子 -->
于 2013-01-31T19:56:46.550 回答