我知道这个问题听起来很困惑,但这就是我想要做的 - 在下面的代码片段中,如果用户在绿色 div 上滚动,我希望黄色 div 相应地滚动,就像黄色 div被滚动。
注意黄色的 div 有 overflow: auto;
但绿色的没有。
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>
我如何实现这一目标?
最佳答案
试试这个 DEMO
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>
关于javascript - 在其他不可滚动的 div 上滚动时如何滚动可滚动的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32724028/