我想使用锚标签在网页上的div内滚动.但是,当我单击锚标记时,整个页面会跳转到div中的锚标记.
div中的内容应该滚动,而不会自动滚动网页的主体.
我一直在谷歌搜索并试图解决这个问题几周,还没有找到一个可接受的解决方案.这似乎也是一个非常常见的问题.
我对javascript知之甚少,但从我收集到的内容中,似乎有两种可能的方法来实现这一点:
1.使页面主体只能通过鼠标滚轮/手动而不是锚标签滚动.这仅适用于身体而不适用于其他因素.
-要么-
2.滚动到div中的锚标记,并在它影响正文之前取消该过程.
如果它没有将锚标记添加到网址,则会获得奖励.
这里有一些类似问题的额外链接,可能有一些你可以使用的想法:看起来很有希望,无法让它工作 在div中滚动而不移动页面
使用event.preventDetfault()或event.returnValue = false可以在锚链接滚动到右边后用于正文 http://js-unit-testing.com/2013/08/08/preventing-anchor-clicking-from-scrolling-到的顶/
类似问题的其他想法 如何在滚动DIV元素时阻止页面滚动？
如何区分手动滚动(通过鼠标滚轮/滚动条)与Javascript/jQuery滚动？
类似问题的其他方法 HTML锚链接没有滚动或跳转
这是一个包含相关元素的HTML和CSS示例.您可以调整浏览器窗口的大小,以便主页面有一个滚动条来查看不需要的自动滚动效果:
<html>
<body>
<div id="main">
<div id="mainwide">
<div id="left">
<a href="#2">2</a>
</div>
<div id="right">
<a id="link" name="2">2</a>
</div>
</div>
</div>
</body>
</html>
这是CSS
html {
background-color: LightGreen;
}
#main {
border: 1px solid black;
margin-top: 200px;
width: 500px;
height: 300px;
overflow: hidden;
}
#mainwide {
width: 1000px;
height: 300px;
}
#left {
background-color: MediumSpringGreen;
width: 500px;
height: 300px;
float: left; …如何overflow: scroll以这样的方式创建一个固定的div,body当鼠标悬停在div上并滚动时不会滚动？有点像facebook.com上窗口底部的固定聊天框.
我已经尝试使用javascript来捕获和停止scroll,wheel并且touchmove事件从冒泡起来stopPropagation(),但它似乎不起作用.
我尽可能地简化了这个问题:https://jsfiddle.net/m9uamaza/
目标是在固定的"bar"div中向上和向下滚动而不使"foo"体移动.如果"bar"div一直滚动到底部,并且我继续滚动,我不希望身体开始滚动.当鼠标不在固定div上时,正文仍应可滚动.
我有一个绝对定位的div,它充当页面中心的模态窗口.模态窗口可垂直滚动,右侧有滚动条.页面本身也可以垂直滚动,右侧有一个滚动条.我希望能够点击链接并让模态窗口滚动到链接的项目.
我可以使用target.scrollIntoView()来实现这一点.但整个页面与模态窗口一起滚动 - 我希望它能使页面不移动,只有模态窗口滚动.如果我使用scrollIntoView(false),页面本身不会滚动,而模态窗口会滚动,但目标元素位于窗口的底部,而我喜欢它在顶部.
有什么办法可以手动抵消div中目标的位置吗？即如果我使用scrollIntoView(false),目标显示在div的底部 - 如果我可以将它偏移到视图窗口的高度我应该能够将它移动到顶部..？
注意:我不能使用JQuery等.
在此先感谢您的帮助.