11

我无意中发现了scrollTop，而且scrollLeft对一个元素起作用时，即使是一个元素overflow: hidden。可以依赖这种行为吗？

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

4

1 回答 1

5

是的，即使元素的 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 上的画廊滚动位置（导航回您滚动画廊的页面）

于 2015-11-14T01:16:13.560 回答