scrollTop和scrollLeft对于溢出隐藏元素是否可靠？

Question

我偶然发现，即使元素为scrollTop，元素上的scrollLeft和overflow: hidden也能正常工作。可以依赖这种行为吗？

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

Answer 1

是，即使某个元素的CSS overflow设置为隐藏，也是如此 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上的图库滚动位置（导航回您滚动图库的页面）