Question

我有一个双栏网站，但用户必须专注于右栏以滚动主要内容。如果用户专注于左侧链接栏，则不会发生任何事情。我尝试编写一个脚本，无论用户的鼠标在哪里，都会滚动右列。它感觉不自然，几乎没有滚动。

以下是我的尝试：https://jsfiddle.net/knfg9Lqp/4/

这是我的网站（滚动仅适用于右侧div）：maxmastalerz.com

我怎么能用适量的滚动来让它变得不那么迟钝和流畅？

我可能会使用plugin，但我不会偏离这个想法。

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

<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

＆＃13;

Answer 1

你为什么分裂和倍增？如果您只是使用var delta = e.originalEvent.wheelDelta;滚动看起来正确

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

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

1 个答案: