javascript - 两列布局。滚动页面上的任何位置应该滚动右列

Question

我有一个两栏网站，但是用户必须关注右栏才能滚动主要内容。如果用户专注于左侧链接栏，则什么也不会发生。我尝试编写一个脚本，无论用户的鼠标在哪里，它都会滚动右栏。它感觉不自然，几乎没有滚动。

这是我的尝试:https://jsfiddle.net/knfg9Lqp/4/

这是我的网站(滚动只适用于右侧的 div):maxmastalerz.com

我怎样才能通过适当的滚动量使其不滞后且流畅？

我可能会使用 plugin ，但是我倾向于远离这个想法。

$(document).bind('mousewheel', function(e){
    var delta = (e.originalEvent.wheelDelta/120)*3;
    var y = $('#right').scrollTop();  //your current y position on the page
    $('#right').scrollTop(y-delta);
});

#left {
  background-color: gray;
  float: left;
  width: 30%;
  height: 150px;
}
#right {
  background-color: aqua;
  float: left;
  width: 70%;
  height: 150px;
  overflow-y: scroll;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="left">
  <a href="/one">Link 1</a>
  <a href="/two">Link 2</a>
  <a href="/three">Link 3</a>
</div>

<div id="right">
  "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</div>


TRY SCROLLING UP AND DOWN USING YOUR MOUSEWHEEL OR TOUCHPAD

Answer 1

为什么要除法和乘法？如果您只是使用 var delta = e.originalEvent.wheelDelta; 滚动看起来是正确的

https://jsfiddle.net/knfg9Lqp/5/