从任何地方滚动 Div

当我的页面底部(a.k.a. #main)进入视图 jQuery 在我的侧边栏上切换一个类，使其可滚动overflow-y: scroll — and overflow: hidden当页面底部看不见时。

这里想要的效果是在页面的底部（在我的例子中，这又是#main div)，但如果有更多内容，则允许侧边栏继续滚动。

所以如果你继续向下滚动#main即使到达底部后，侧边栏也会开始滚动。

现在的问题是所需的滚动效果仅在光标悬停时才起作用#sidebar。我希望它更自然并且能够滚动而不需要将光标悬停在#sidebar.

HTML:

<div id="container">
    <div id="header"></div>

    <div id="main"> 
        <p>Lorem ipsum dolor sit amet, [...]</p>   
    </div>
    <div id="sidebar">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
            <li>Item 9</li>
            <li>Item 10</li>
            [...]
         </ul>
    </div>
</div>

JavaScript:

$('#sidebar').height( $('#main').height() );

$('#main').waypoint(function() {
    $('#sidebar').toggleClass('scrollable');
}, { offset: 'bottom-in-view' });

我在这里为我的问题设置了一个小提琴： http://jsfiddle.net/ZZqLr/ http://jsfiddle.net/ZZqLr/

跟进：通过从另一个角度解决问题，我成功地达到了预期的效果。

这一次，当底部#main进入视野后，它固定在窗口的底部，而#sidebar继续自由滚动。这有点像黑客，但在视觉上与我的需求相同。

http://jsfiddle.net/ZZqLr/1/ http://jsfiddle.net/ZZqLr/1/

您可以使用以下代码捕获鼠标的滚动事件：

var mouseWheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"; //FF doesn't recognize mousewheel as of FF3.x

if (document.attachEvent) { //if IE (and Opera depending on user setting) 
    document.attachEvent("on"+mouseWheelEvent, mouseWheelEventHandler);
} else if (document.addEventListener) { //WC3 browsers 
    document.addEventListener(mouseWheelEvent, mouseWheelEventHandler, false);
}

此后，即使您已到达文档末尾，也很容易看到有人滚动。 这mouseWheelEventHandler是我传递来处理你的函数mouseWheelEvent对你来说，它看起来像这样：

function mouseWheelEventHandler(e)
{
    if( !sidebar.hasClass('scrollable') && !sidebar.is(":hover") ) {
        return true;
    }

    var event = window.event || e; //equalize event object
    var delta = event.detail ? event.detail*(-120) : event.wheelDelta; //check for detail first so Opera uses that instead of wheelDelta
    sidebar.scrollTop(sidebar.scrollTop()-delta);        
}

仅当侧边栏具有可滚动类并且您尚未将鼠标放在侧边栏上时，它才会滚动侧边栏，因为无论如何它都会滚动该元素，并且您将向上滚动它。

根据以下链接，这应该适用于大多数浏览器：http://www.javascriptkit.com/javatutors/onmousewheel.shtml http://www.javascriptkit.com/javatutors/onmousewheel.shtml

当然，这是可以玩的小提琴：http://jsfiddle.net/ZZqLr/5/ http://jsfiddle.net/ZZqLr/5/

EDIT

为了完成答案，我们将添加当您再次向上滚动时仅向上滚动侧边栏而不是页面的行为，为此我们只需通过以下方式防止滚动事件event.preventDefault()并在末尾添加以下代码mouseWheelEventHandler:

if( sidebar.scrollTop() == 0 ) {
    sidebar.removeClass('scrollable');
}

该函数如下所示：

function mouseWheelEventHandler(e)
{
    if( !sidebar.hasClass('scrollable') && !sidebar.is(":hover") ) {
        return true;
    }
    var event = window.event || e; //equalize event object
    event.preventDefault();
    var delta = event.detail ? event.detail*(-120) : event.wheelDelta; //check for detail first so Opera uses that instead of wheelDelta
    sidebar.scrollTop(sidebar.scrollTop()-delta);
    if( sidebar.scrollTop() == 0 ) {
        sidebar.removeClass('scrollable');
    }
}

您再次可以在这里使用它：http://jsfiddle.net/ZZqLr/6/ http://jsfiddle.net/ZZqLr/6/

顺便说一句，waypoints.js 甚至不是必需的，只是为了好玩，无需 waypoints.js，只需删除 waypoint 函数并在 eventHandle 函数中添加以下内容即可：

function mouseWheelEventHandler(e)
{
    if( !sidebar.hasClass('scrollable') && !sidebar.is(":hover") ) {
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
            sidebar.addClass('scrollable');
        }
        return true;
    }

    var event = window.event || e; //equalize event object
    event.preventDefault();
    var delta = event.detail ? event.detail*(-120) : event.wheelDelta; //check for detail first so Opera uses that instead of wheelDelta
    sidebar.scrollTop(sidebar.scrollTop()-delta);
    if( sidebar.scrollTop() == 0 ) {
        sidebar.removeClass('scrollable');
    }
    return true;
}

也为了玩这个，你可能已经猜到了：http://jsfiddle.net/ZZqLr/7/ http://jsfiddle.net/ZZqLr/7/

我想这就是全部了:)