溢出隐藏元素的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 会记住您在历史返回上的图库滚动位置（导航回您滚动图库的页面）

Answer 2

这种行为可以依赖吗？

它适用于我笔记本电脑上的 MSFT Edge；在移动设备上，日志似乎显示 google chrome mobile 中的

scrollLeft

和

scrollTop

都是

0

因此，并不总是可靠