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部分。我不想使用位置：固定在任何东西上。这可以用jQuery吗？

请参阅小提琴，了解它应如何运作： http://jsfiddle.net/ks096Lts/

Answer 1

将此css添加到水平（x）或垂直（y）滚动到中间div： style =＆＃34; overflow-x：auto;溢出-γ：汽车;＆＃34;

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

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 - 使用浏览器滚动条控制divs滚动

2 个答案: