scrollTop 和 scrollLeft 在 display:none 元素上不起作用
Posted
技术标签:
【中文标题】scrollTop 和 scrollLeft 在 display:none 元素上不起作用【英文标题】:scrollTop & scrollLeft do not work on display:none elements 【发布时间】:2013-06-07 12:34:28 【问题描述】:我试图在显示之前滚动隐藏元素。这是我正在使用的代码:
<div class="main">
<div class="bg">
</div>
</div>
.main
display:none;
position:abolsute;
width:250px;height:250px;
overflow:scroll;
.bg
background: blue url(http://defaulttester.com/img/bg-landing-mario.jpg);
width:1200px;
height:800px;
$(".main").scrollTop($(".bg").height()/2);
$(".main").scrollLeft($(".bg").width()/2);
如果它显示它可以正常工作,但如果它的display:hidden
它将简单地不起作用。有没有办法避免这种情况并让它发挥作用?
JSFiddle:http://jsfiddle.net/dpjzJ/
【问题讨论】:
【参考方案1】:改用visibility: hidden;
或类似的类:
.hide
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
或者这个(来自样板):
.visuallyhidden
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
您可能知道,带有display: none;
的内容在页面上没有位置。
Check out this article on the subject.
【讨论】:
一定有更好的方法吗?有黑客。我不能在可见性上使用 .show(): hidden;元素? 是的,您应该使用 toggleClass() 或 addClass() / removeClass() 以及我在这里展示的类之一。或者 $('stuff').css('visibility', 'visible');【参考方案2】:如果您的目标只是将 scrollLeft 和 scrollTop 设置为 0(因为这是我的目标),那么一个非常简单的解决方案是按照以下步骤操作:
获取对要重置的元素的引用。 获取对元素父级的引用。 从父元素中移除元素。 将元素添加回父元素。scrollTop 和 scrollLeft 现在将被设置回 0,即使它们不可见。
【讨论】:
【参考方案3】:function resetScroll(element)
element.parentElement.replaceChild(element,element)
这会将 scrollTop 和 scrollLeft 都设置为 0,即使不显示。
使用示例:
resetScroll(document.getElementById("my_scroll"))
【讨论】:
警告:这在 Edge v42 上不起作用(也许 IE 也是),使用相同元素的 replaceChild 将删除该元素 我还没有确认这在 Edge 中是否有效(如果这仍然是一件事),但在 JQuery 中,我分离了对象,然后将其附加回其父对象。以上是关于scrollTop 和 scrollLeft 在 display:none 元素上不起作用的主要内容,如果未能解决你的问题,请参考以下文章
使用动画链(jQuery)在 Ipad 上的 ScrollLeft 和 ScrollTop
JQUERY中的scrollTop 和scrollleft到底是啥意思
使“scrollLeft”/“scrollTop”更改不触发滚动事件监听器
《scrollTop VS scrollLeft 之微信小程序》
jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position