在div中滚动而不移动页面 [英] Scrolling within a div without moving page

问题描述

我有一个< div id =innerContent> ，其中 overflow-y：scroll; 。
innerContent中锚点的链接位于父页面中，而不在 div 中。

到目前为止，我已经尝试过锚和scrollto的尝试在内容中滚动。
它们都完成滚动，但innerContent的高度大于浏览器窗口，因此整个父页面也会在点击链接时滚动到锚点。

有没有办法用JavaScript做到这一点，而不移动父页面？
我无法控制div的高度 - 这是别人的设计。

接近...但这里没有答案。
如何自动滚动内联div没有滚动整个页面？

谢谢！

解决方案

jsfiddle 适用于Chrome。未在其他浏览器中测试过。

捕捉mousewheel事件，使用事件数据手动滚动，然后取消原始事件。看起来可能会产生混乱。

$ p $ $（'＃scroll'）。bind（'mousewheel'，function（e）{

$（this）.scrollTop（$（this）.scrollTop（） - e.originalEvent.wheelDeltaY）;

//防止滚动页面
返回false ;
}）;


I have a <div id="innerContent"> with overflow-y:scroll;. Links to anchors within innerContent are located on parent page, not in the 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.

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.

This came close... but there isn't an answer here. How to automatic scroll inline div without scrolling the whole page?

Thank you!

解决方案

This jsfiddle works in Chrome for me. Not tested in other browsers.

Catches the mousewheel event, uses the event data to scroll manually, then cancels the original event. Seems potentially messy for production.

$('#scroll').bind('mousewheel', function(e){

    $(this).scrollTop($(this).scrollTop()-e.originalEvent.wheelDeltaY);

    //prevent page fom scrolling
    return false;    
});

这篇关于在div中滚动而不移动页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！