用于溢出隐藏元素的 scrollTop 和 scrollLeft 可靠吗？答案

【问题标题】：Is scrollTop, and scrollLeft for overflow hidden elements reliable?用于溢出隐藏元素的 scrollTop 和 scrollLeft 可靠吗？
【发布时间】：2015-11-13 23:11:25
【问题描述】：

我偶然发现即使元素是overflow: hidden，元素上的scrollTop 和scrollLeft 也有效。可以依赖这种行为吗？

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

【问题讨论】：

我创建了一个使用 scrollLeft 的超简单响应式画廊。 jsfiddle.net/swrkeg30/2/embedded/result 有趣地 Firefox 会记住 Hystory-Back 上的滚动位置。 Chrome 没有......至少在 jsfiddle 中......我敢打赌这也在 chrome 中工作，遗憾的是我现在没有时间看看 Chrome 发生了什么 - 或者它只是小提琴在 Chrome 中的行为。 .
返回或不返回 - 您可以随意使用 scrollLeft/top。可能不会像 transform 上的 CSS3 transition/animation 那样加速，但无论如何它的使用都很简单。

标签： javascript html dom custom-scrolling

【解决方案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 上的画廊滚动位置（导航回您滚动画廊的页面）

【讨论】：

完美！历史问题不是交易破坏者。只要滚动属性与溢出一致：隐藏就很好。不过这很有趣。我想知道chrome的历史问题是否是一个错误。我不熟悉这方面的标准，我不确定我是否要寻找它。 :)
你有纯 JavaScript 版本吗？

使用scrollLeft 制作动画画廊

使用`scrollLeft` 制作动画画廊