从任何地方滚动Div [英] Scrolling a Div from Anywhere
问题描述
当我的页面底部（又名 #main ）进入视图时，jQuery在我的侧边栏上切换一个类，使其可以使用 overflow-y：滚动 - 和 overflow：hidden 当页面底部不在视图中时。
When the bottom of my page (a.k.a. #main) comes into view jQuery toggles a class on my sidebar to make it scrollable using overflow-y: scroll — and overflow: hidden when the bottom of the page is out of view.
此处所需的效果位于页面底部（在我的示例中，再次是 #main div ），但允许侧边栏保持滚动，前提是有更多内容。
The desired effect here is to be at the bottom of the page (again in my example that's the #main div), but allow for the sidebar to keep scrolling provided there's more content.
所以如果你要在 #main 上继续向下滚动，即使你到达底部，边栏也是如此会开始滚动。
So if you were to keep scrolling down on #main even after you'd reached the bottom, the sidebar would begin to scroll.
现在问题是所需的滚动效果仅在光标超过 #sidebar 时才有效。我希望它更自然，更方便滚动，而光标不需要超过 #sidebar 。
The problem right now is the desired scrolling effect only works when the cursor's over #sidebar. I'd like for it to be more natural andcapable of scrolling without the cursor needing to be over the #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/
跟进：从另一个角度解决问题，我设法达到了预期的效果。
Follow-Up: By approaching the problem from another angle I managed to achieve the desired effect.
这一次，当 #main 的底部进入视图时，它会固定在窗口的底部，而 #sidebar 继续自由滚动。这有点像黑客，但在视觉上与我的需求相同。
This time around, when the bottom of #main comes into view it becomes fixed to the bottom of the window, while the #sidebar continues to scroll freely. It's a bit of a hack, but is visually identical for my needs.
推荐答案
你可以抓住滚动条使用以下代码的鼠标事件：
You can catch the scroll event of a mouse with the following code:
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 所传递的函数，它看起来像这样：
After this it is quite easy to see when someone scrolls, even though you have reached the end of the document.
The mouseWheelEventHandler is the function that I passed to handle your mouseWheelEvent for you, it looks like this:
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);
}
如果侧栏有可滚动的类，它只会滚动侧栏还没有鼠标放在侧边栏上，因为无论如何它都会滚动该元素你会加倍滚动它。
It will only scroll the sidebar if the sidebar has the class scrollable and if you are not already with your mouse on the sidebar, as it would scroll that element anyway and you would and up double scrolling it.
这应该适用于大多数浏览器根据以下链接：
http://www.javascriptkit.com/javatutors/onmousewheel.shtml
This should work on most browsers according to the following link: http://www.javascriptkit.com/javatutors/onmousewheel.shtml
这里是当然的小提琴：
http://jsfiddle.net/ZZqLr/5/
And here is the fiddle to play with ofcourse: http://jsfiddle.net/ZZqLr/5/
编辑
为了完成答案，我们将添加它的行为只在向上滚动时向上滚动侧边栏而不是页面，为此我们只需要阻止滚动事件 event.preventDefault（）并在 mouseWheelEventHandle的末尾添加以下代码r ：
To complete the answer, we'll add the behaviour of it only scrolling the sidebar up instead of the page when you scroll up again, for this we only have to prevent the scrolling event by event.preventDefault() and add the following code at the end of the 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/
Again you can play with it right here: http://jsfiddle.net/ZZqLr/6/
顺便说一句，waypoints.js甚至不需要这个，只是为了好玩，一个没有waypoints.js，删除了航点功能，只是在eventHandle函数中添加以下内容：
By the way, the waypoints.js is not even necessary for this, just for fun, one without the waypoints.js by removing the waypoint function and just adding the following in the eventHandle function:
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/
And for playing with that as well, you might've guessed: http://jsfiddle.net/ZZqLr/7/
这就是全部，我猜:)
And that will be all, I guess :)
这篇关于从任何地方滚动Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
