javascript - オーバーフロー隠し要素の 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 のギャラリーのスクロール位置を記憶します (ギャラリーをスクロールしたページに戻る)