javascript 在 div 内滚动而不移动页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6347333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scrolling within a div without moving page
提问by amy
I have a <div id="innerContent">with overflow-y:scroll;.
Links to anchors within innerContent are located on parent page, not in the div.
我有一个<div id="innerContent">带overflow-y:scroll;。指向 innerContent 中的锚点的链接位于父页面上，而不是在div.
So far, I have tried anchors and scrollto's to attempt to scroll within the content. They both complete the scroll, but innerContent's height is larger than the browser window, so the entire parent page also scrolls to the anchor when the links are clicked.
到目前为止，我已经尝试使用锚点和滚动条来尝试在内容中滚动。它们都完成了滚动，但是innerContent的高度比浏览器窗口大，所以当点击链接时整个父页面也会滚动到锚点。
Is there a way to do this with javascript, without moving the parent page? I do not have control over the height of the div - this is someone else's design.
有没有办法用 javascript 做到这一点，而无需移动父页面？我无法控制 div 的高度 - 这是别人的设计。
This came close... but there isn't an answer here. How to automatic scroll inline div without scrolling the whole page?
这已经很接近了……但这里没有答案。 如何在不滚动整个页面的情况下自动滚动内联 div？
Thank you!
谢谢！
回答by Morlem
This jsfiddleworks in Chrome for me. Not tested in other browsers.
这个jsfiddle对我来说在 Chrome 中工作。未在其他浏览器中测试。
Catches the mousewheel event, uses the event data to scroll manually, then cancels the original event. Seems potentially messy for production.
捕获 mousewheel 事件，使用事件数据手动滚动，然后取消原来的事件。似乎对生产来说可能很混乱。
$('#scroll').bind('mousewheel', function(e){
$(this).scrollTop($(this).scrollTop()-e.originalEvent.wheelDeltaY);
//prevent page fom scrolling
return false;
});
回答by KooiInc
Use a fixed layout. In this jsfiddleI have a working example for it. Study the css. You don't need javascript for it.
使用固定布局。在这个 jsfiddle 中，我有一个工作示例。研究css。你不需要javascript。
回答by antoine129
Inspired by Morlem's code, but working the other way around: stop the propagation only if scrolling out. In pure JS:
受 Morlem 代码的启发，但反过来工作：仅在滚动时停止传播。在纯 JS 中：
container.addEventListener('mousewheel', function(e) {
var scrollingOverTheTop = (e.wheelDelta > 0 && this.scrollTop == 0);
var scrollingOverTheBottom = (e.wheelDelta < 0 && (this.scrollTop >= this.scrollHeight - this.offsetHeight));
if (scrollingOverTheBottom || scrollingOverTheTop) {
e.preventDefault();
e.stopPropagation();
}
}, true);
回答by Alexander Tsepkov
And if you do decide to use javascript (again, like KooiInc said, if you don't need js, don't use it), you can try using event.cancelBubble = true, which would prevent the event from propagating to the parent container so the page would not see your inner-div scrolling. Additional command you can use is event.preventDefault(), which prevents browser from triggering default behavior (i.e. scrolling) to the event.
如果您决定使用 javascript（同样，就像 KooiInc 所说的，如果您不需要 js，请不要使用它），您可以尝试使用event.cancelBubble = true，这将阻止事件传播到父容器，因此页面将看不到你的内部 div 滚动。您可以使用的其他命令是event.preventDefault()，它可以防止浏览器触发事件的默认行为（即滚动）。
回答by Brandon McKinney
I just solved my issue with this by creating the following in CSS:
我刚刚通过在 CSS 中创建以下内容解决了我的问题：
body.scroll_locked {
height: 100%;
width: 100%;
overflow: hidden;
}
Then, when I show my modal/lightbox, which is JavaScript (jQuery), I add the scroll_locked class to the body to lock it in place and remove the class to go back. Seems like you could do the same for a mouseenter/mouseleave event for a div that's always on the page and you want to have the same effect.
然后，当我显示我的模态/灯箱，即 JavaScript (jQuery) 时，我将 scroll_locked 类添加到主体以将其锁定到位并删除该类以返回。似乎您可以对始终位于页面上的 div 的 mouseenter/mouseleave 事件执行相同的操作，并且您希望获得相同的效果。
$('body').addClass('scroll_locked');
$('body').removeClass('scroll_locked');
