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

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

[markdown]
## 状況

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

## CSS: overflow-x

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

> * [overflow-x – CSS | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/overflow-x)

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

> * [ブラウザ幅を超えた部分を隠す手法として body { overflow-x:hidden; } はあまり使わない方がいい気がする件 – JeffreyFrancesco.org](http://jeffreyfrancesco.org/weblog/2011050801)

“`css
.noscroll-x {
overflow-x: hidden;
}
“`

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

> * [jQuery or Javascript – how to disable window scroll without overflow:hidden; – Stack Overflow](http://stackoverflow.com/questions/19817899/jquery-or-javascript-how-to-disable-window-scroll-without-overflowhidden)
> * [スマホでスクロールを禁止させる方法 | negic](http://blog.negic.net/?p=370)

## jQuery: .scrollTop()

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

> * [.scrollTop() | jQuery API Documentation](http://api.jquery.com/scrollTop/)
> * [.scrollTop() – jQuery API Documentation 日本語訳](http://s3pw.com/jQ-JPN/scrolltop/)

`$(window).scroll` を `$(‘div’).scroll` に変更する。

“`javascript
$(function() {
‘use strict’;
$(‘div’).scroll(function() {
console.log($(this).scrollTop());
“`

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

## 補遺

> * [CSS – iosでもスクロールさせないようにする – Qiita](http://qiita.com/yahsan2/items/b35db0e6c5f769f500b0)
[/markdown]