[英]How to scroll a scrollable div when scrolled on other, non-scrollable div?
I know the question sounds confusing, but here is what I am trying to do - in the snippet below, if the user scrolls on the green div, I want the yellow div to be scrolled accordingly, just as if the yellow div was scrolled. 我知道这个问题听起来令人困惑,但这就是我要做的事情 - 在下面的代码片段中,如果用户在绿色div上滚动,我希望黄色div相应地滚动,就像黄色div被滚动一样。
Note that the yellow div has overflow: auto;
注意黄色div有overflow: auto;
but the green one doesnt. 但绿色的不是。
document.getElementById('green').addEventListener('wheel', function(e){ console.log('scrolled!'); console.log(e.deltaX); // it is always "-0" // scroll div#yellow accordingly });
#yellow{ background-color: yellow; display: inline-block; width: 200px; height: 200px; overflow: auto; vertical-align: top; padding 20px; } #green{ background-color: green; display: inline-block; width: 100px; height: 200px; vertical-align: top; }
<div id='yellow'> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> </div> <div id='green'></div>
How do I achieve this? 我该如何实现这一目标?
document.getElementById('green').addEventListener('wheel', function(e) {
console.log(e.deltaY); // it is always "-0"
// scroll div#yellow accordingly
document.getElementById('yellow').scrollTop += e.deltaY;
});
#yellow {
background-color: yellow;
display: inline-block;
width: 200px;
height: 200px;
overflow: auto;
vertical-align: top;
padding 20px;
}
#green {
background-color: green;
display: inline-block;
width: 100px;
height: 200px;
vertical-align: top;
}
<div id='yellow'>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</div>
<div id='green'>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
You're trying to get the deltaX
property, and what you need for vertical scrolling is the deltaY
one. 你试图让deltaX
属性,则需要垂直滚动什么是deltaY
之一。
document.getElementById('green').addEventListener('wheel', function(e){
e.preventDefault();
document.getElementById('yellow').scrollTop += e.deltaY * 10;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.