16

我试图在显示之前滚动隐藏元素。这是我正在使用的代码：

<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/

4

3 回答 3

11

使用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;正如您可能知道的那样，页面上没有位置的东西。

查看有关该主题的这篇文章。

于 2013-06-11T15:24:43.260 回答
3

如果您的目标是将 scrollLeft 和 scrollTop 设置为 0（因为那是我的目标），那么一个非常 hacky 的解决方案是按照以下步骤操作：

  • 获取对要重置的元素的引用。
  • 获取对元素父级的引用。
  • 从父元素中移除元素。
  • 将元素附加回父级。

scrollTop 和 scrollLeft 现在将被设置回 0，即使它们是不可见的。

于 2014-04-30T01:50:41.613 回答
2 
function resetScroll(element) {
    element.parentElement.replaceChild(element,element)
}

即使不显示，这会将 scrollTop 和 scrollLeft 都设置为 0。

示例使用：

resetScroll(document.getElementById("my_scroll"))
于 2017-12-18T04:07:00.270 回答