Question

当我的页面底部（又名#main）进入视图时，jQuery在我的侧边栏上切换一个类，使其可以使用overflow-y: scroll - 和{{1}滚动当页面底部不在视野范围内时。

这里所需的效果是位于页面底部（在我的示例中再次是overflow: hidden div），但允许侧边栏继续滚动，前提是内容更多。

因此，即使在您到达底部后仍然向下滚动#main，侧边栏也会开始滚动。

现在的问题是所需的滚动效果仅在光标超过#main时才有效。我希望它更自然，更有弹性，而光标不需要超过#sidebar。

HTML ：

#sidebar

的Javascript ：

<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>

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

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

这一次，当$('#sidebar').height( $('#main').height() ); $('#main').waypoint(function() { $('#sidebar').toggleClass('scrollable'); }, { offset: 'bottom-in-view' });的底部进入视图时，它会固定在窗口的底部，而#main继续自由滚动。这有点像黑客，但在视觉上与我的需求相同。

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

Answer 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://jsfiddle.net/ZZqLr/5/

修改

要完成答案，我们会添加它的行为，只有在您再次向上滚动时才向上滚动侧边栏而不是页面，为此我们只需要阻止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/

顺便说一句，waypoints.js甚至不需要这个，只是为了好玩，一个没有waypoints.js，删除了航点功能，只是在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/

这就是全部，我猜:)

从任何地方滚动Div

1 个答案: