在其他不可滚动的 div 上滚动时如何滚动可滚动的 div？

Question

我知道这个问题听起来令人困惑，但这是我想要做的 - 在下面的 sn-p 中，如果用户在绿色 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>

我如何做到这一点？

Answer 1

试试这个 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>

Answer 2

您正在尝试获取deltaX 属性，而垂直滚动所需的是deltaY 之一。

document.getElementById('green').addEventListener('wheel', function(e){
  e.preventDefault();
  document.getElementById('yellow').scrollTop += e.deltaY * 10;
});