,

[jQuery] overflow-x を使うと scrollTop で値がとれなくなった

公開日: 2014/07/10
更新日: 2018/11/14

正解がズバリ見つからなかったので、何となく対応できたつもり。

Contents

状況

  • position: fixed で固定した要素が横スクロールで崩れるのを防ぐために overflow-x を利用。
  • すると jQuery の $(window).scrollTop() で値がとれなった。(常に0)

CSS: overflow-x

overflow-x: hidden で横スクロールをさせないようにする。

body, html に対してではなく、body 直下に wrapper div を作成して対応する。

.noscroll-x {
  overflow-x: hidden;
}

他にも色々ありそうだが、とりあえずスルー。

jQuery: .scrollTop()

.scrollTop() でY軸のスクロール量を取得する。

$(window).scroll を $('div').scroll に変更する。

$(function() {
  'use strict';
  $('div').scroll(function() {
    console.log($(this).scrollTop());

以上で chrome, Safari , IE8+ な形で動作を確認できました。
IE 7 に関しては、横スクロール可能でY軸のスクロール量が取得できずそれなりの表示。
利用不可になるような不具合にはならないので、今回はここまでの対応にとどめる。

補遺