Question

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

<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);

如果显示IT，它的工作正常，但是如果它display:hidden它将不起作用。反正是为了避免这种情况并使其有效吗？

JSFiddle：http://jsfiddle.net/dpjzJ/

Answer 1

使用visibility: hidden;或类似的类来代替：

.hide {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

或者这（来自Boilerplate）：

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

Answer 2

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

获取您要重置的元素的引用。
获取元素的父级的引用。
从父级中删除元素。
将元素追加回父级。

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

Answer 3

function resetScroll(element) {
    element.parentElement.replaceChild(element,element)
}

即使没有显示，也会将scrollTop和scrollLeft都设置为0。

使用示例：

resetScroll(document.getElementById("my_scroll"))

scrollTop＆amp; scrollLeft在display：none元素上不起作用

3 个答案: