溢出隐藏元素的scrollTop、scrollLeft靠谱吗？

Question

我无意中发现 scrollTop 和 scrollLeft 对元素有效，即使元素是 overflow: hidden。这种行为值得信赖吗？

对于没有滚动条的元素，scrollTop 和 scrollLeft 应该为零，在这些元素上设置它们应该没有效果。

Answer 1

是，即使一个元素CSSoverflow设置为隐藏，
Javascript Element.scrollTop(), Element.scrollLeft() 允许您操纵元素的滚动位置如果元素包含溢出的子元素 .

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

这是一个快速用例：

动画画廊使用 `scrollLeft`

var GAL = $("#gal"),
    n = GAL.find(">*").length;
    c = 0;

$("button").on("click", function(){
  GAL.animate({ scrollLeft: (++c%n) * GAL.width() });
});

#gal {
  
  height:     40vh;
  overflow:   hidden; /* !! */
  white-space:nowrap;
  font-size:  0;
  
} #gal>* {
  
  font-size:      1rem;
  display:        inline-block;
  vertical-align: top;
  width:          100%;
  height:         inherit;
  background:     50% / cover;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="gal">
  <div style="background-image:url(//placehold.it/800x600/cf5);"></div>
  <div style="background-image:url(//placehold.it/800x600/f0f);"></div>
  <div style="background-image:url(//placehold.it/800x600/444);"></div>
</div>

<button>scrollLeft</button>

_{还不确定为什么 Chrome 不执行以下操作但是：}
Firefox 会记住您在 historyBack 上的图库滚动位置（导航回到您滚动图库的页面）

溢出隐藏元素的scrollTop、scrollLeft靠谱吗？

Is scrollTop, and scrollLeft for overflow hidden elements reliable?

html

javascript

dom

custom-scrolling

动画画廊使用 `scrollLeft`

溢出隐藏元素的scrollTop、scrollLeft靠谱吗？

Is scrollTop, and scrollLeft for overflow hidden elements reliable?

html

javascript

dom

custom-scrolling

动画画廊使用 scrollLeft

动画画廊使用 `scrollLeft`