如何在其他不可滾動的div上滾動滾動可滾動的div？

Question

我知道這個問題聽起來令人困惑，但這就是我要做的事情 - 在下面的代碼片段中，如果用戶在綠色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;
});