javascript - scrollTop 和 scrollLeft 在显示 :none elements 上不起作用

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

如果它显示，它工作正常，但如果它的 display:hidden 它将简单地不起作用。有什么办法可以避免这种情况并让它发挥作用吗？

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

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