jQuery

Question

我正在尝试仅使溢出的 div 可滚动，即使您尝试滚动页面上的任何位置，超出 div。我在完成之前遇到过一个网站，但不确定如何。

这是一个基本标记，可以让我更好地了解我要实现的目标。

<html>
    <header>
    </header>

    <style type="text/css">
        html, body, div{ min-height: 100%; }
    </style>

    <body>
        <div class="wrapper">
            <div class="header"></div>
            <div class="main">
                <div class="side-bar left-col"></div>
                <div class="content-area middle-col"></div> <-- This div will be overflowed.
                <div class="feature-image right-col"></div>
            </div>
            <div class="footer"></div>
        </div>
    </body>
</html>

当您滚动网站的任何位置时，不会滚动整个网站，只有中间的 div 部分会滚动。我也不想在任何事情上使用 position:fixed。 jQuery 这可能吗？

查看 Fiddle 它应该如何工作： http://jsfiddle.net/ks096Lts/

Answer 1

为水平 (x) 或垂直 (y) 滚动添加此 css 到中间 div：样式="overflow-x: auto; overflow-y:auto;"

如果您希望滚动条始终可见，请将自动更改为滚动。

Answer 2

jquery-mousewheel 可能是您要查找的内容：https://github.com/jquery/jquery-mousewheel

您可以定位将滚动的 div，无论您的光标放在页面上的任何位置

$(function() {
    var $target = $('.main');
    $("body").mousewheel(function(event, delta) {
      $target.scrollTop($target.scrollTop() - (delta * 30));
      event.preventDefault();
   });
});

看这里：http://jsfiddle.net/5h47wygo/

jQuery - 使用浏览器滚动条控制 div 滚动

jQuery - Control a divs scroll using the browsers scrollbar

css

scroll

overflow