CSS溢出滚动条可以用Javascript控制吗?
我有一个CSS溢出滚动条可以用Javascript控制吗?,javascript,jquery,css,Javascript,Jquery,Css,我有一个div和一个溢出类:auto有没有办法在滚动条出现时控制它 我有一个ajax照片库(无页面刷新),其中一些标题文本位于div中,但内容长度不同。如果在此div中向下滚动,然后前进到下一张幻灯片,滚动条不会返回顶部。所以,我想知道是否有办法控制这个滚动条。谢谢。测试后使用elm.scrollTop=0更新: <div style="overflow:auto;height:100px;width:100px"> <p>test</p> &
div
和一个溢出类:auto代码>有没有办法在滚动条出现时控制它
我有一个ajax照片库(无页面刷新),其中一些标题文本位于div
中,但内容长度不同。如果在此div中向下滚动,然后前进到下一张幻灯片,滚动条不会返回顶部。所以,我想知道是否有办法控制这个滚动条。谢谢。测试后使用elm.scrollTop=0更新:
<div style="overflow:auto;height:100px;width:100px">
<p>test</p>
<p>test</p>
<p>test</p>
<a href="javascript:" onclick="this.parentNode.scrollTop = 0">go up</a>
</div>
试验
试验
试验
您可以更改
元素的属性scrollTop
的值
请参见MDC文档上的
请参阅MSDN上的
虽然scrollTop
不是任何标准的一部分,但所有主要浏览器都支持它。要将溢出元素myControl
上的竖条移回顶部,必须执行以下操作
$("#myControl").scrollTop(0);
或者,如果是单杠,将其移动到起点(左)
如果要隐藏滚动条,必须执行此操作
#myControl {
overflow: hidden;
}
您假设下一张幻灯片位于顶部。如果您有绝对定位幻灯片,您最好执行以下操作,以确保滚动到正确的nextSlide位置:
var nextSlidePos = $("#slide" + nextSlide).position();
$("#myControl").scrollTop( nextSlidePos.top ).scrollLeft( nextSlidePos.left );
使用jQuery,您可以设置滚动区域的顶部,如下所示:
$('#contents').scrollTop(0);
请注意,这在没有jQuery的情况下也是可能的:
document.getElementById('contents').scrollTop = 0;
对于这两个演示,按重置按钮将滚动条设置回顶部。这不是浏览器的滚动条。这是显示在div上的滚动条,因为它有一个溢出:auto-CSS声明。内容出现在div中。我从未使用过它,但您是否尝试过div.scrollTo(x,y)
?很有趣。谢谢让我调查一下。谢谢你的建议。让我来调查一下,我把答案给安德。
document.getElementById('contents').scrollTop = 0;