33

jQueryMobile を使用して iOS および Android 用の Web サイトを作成しました。

ドキュメント自体をスクロールしたくありません。代わりに、領域 (<div>要素) だけをスクロール可能にする必要があります (css プロパティを介してoverflow-y:scroll)。

そこで、次の方法でドキュメントのスクロールを無効にしました。

$(document).bind("touchstart", function(e){
    e.preventDefault();
});

$(document).bind("touchmove", function(e){
    e.preventDefault();
});

ただし、設定されているかどうかに関係なく、ドキュメント内の他のすべての要素のスクロールも無効になりますoverflow:scroll。

どうすればこれを解決できますか?

4

11 に答える 11

24

このCSSのみのソリューションはどうですか？

https://jsfiddle.net/Volker_E/jwGBy/24/

bodyposition: fixed;とあなたが望む他のすべての要素を取得しますoverflow: scroll;。モバイルChrome（WebKit）/ Firefox 19 /Opera12で動作します。

また、jQueryソリューションに向けたさまざまな試みもご覧いただけます。ただし、touchmove/touchstartをドキュメントにバインドするとすぐに、バインドされていないかどうかに関係なく、子divのスクロールが妨げられます。

免責事項：この問題の解決策は、多くの点で基本的にUXに関してはあまり良くありません！訪問者のビューポートが正確にどれだけ大きいか、または訪問者が使用しているフォントサイズ（クライアントユーザーエージェントスタイルなど）がわからないため、重要なコンテンツがドキュメント内で非表示になっている可能性があります。

于 2013-02-28T14:41:42.390 に答える
12

多分私は質問を誤解しましたが、私が正しければ：

特定の要素以外はスクロールできないようにしたいので、次のようにします。

$(document).bind("touchmove", function(e){
    e.preventDefault();
});

ドキュメント内のすべてを防止します。

スクロールしたい要素でイベントのバブリングを停止してみませんか? (PS: タッチスタートを防止する必要はありません -> クリックの代わりに要素の選択にタッチスタートを使用する場合も同様に防止されます。実際に動きをトレースしているため、タッチムーブのみが必要です)

$('#element').on('touchmove', function (e) {
     e.stopPropagation();
});

要素CSSで

#element {
   overflow-y: scroll; // (vertical) 
   overflow-x: hidden; // (horizontal)
}

モバイルデバイスを使用している場合は、さらに一歩進めることもできます。ハードウェア アクセラレーションによるスクロールを強制することができます (ただし、すべてのモバイル ブラウザーがこれをサポートしているわけではありません)。

Browser Overflow scroll:

Android Browser Yes
Blackberry Browser  Yes
Chrome for Mobile   Yes
Firefox Mobile  Yes
IE Mobile           Yes
Opera Mini          No
Opera Mobile    Kinda
Safari          Yes

#element.nativescroll {
    -webkit-overflow-scrolling: touch;
}

正常：

<div id="element"></div>

ネイティブ感:

<div id="element" class="nativescroll"></div>
于 2014-05-17T19:45:27.347 に答える
12

最後に、私はそれを機能させました。本当に簡単です：

var $layer = $("#layer");
$layer.bind('touchstart', function (ev) {
    var $this = $(this);
    var layer = $layer.get(0);

    if ($this.scrollTop() === 0) $this.scrollTop(1);
    var scrollTop = layer.scrollTop;
    var scrollHeight = layer.scrollHeight;
    var offsetHeight = layer.offsetHeight;
    var contentHeight = scrollHeight - offsetHeight;
    if (contentHeight == scrollTop) $this.scrollTop(scrollTop-1);
});
于 2013-03-22T23:37:25.310 に答える
3

これが私が使用している解決策です：

$scrollElement はスクロール要素、$scrollMask は style の div ですposition: fixed; top: 0; bottom: 0;。$scrollMaskのz-indexは $scrollElement より小さいです。

$scrollElement.on('touchmove touchstart', function (e) {
    e.stopPropagation();
});

$scrollMask.on('touchmove', function(e) {
    e.stopPropagation();
    e.preventDefault();
});
于 2014-08-13T07:44:47.623 に答える
0

まず、innerScroller を画面上の好きな場所に配置してから、css を「hidden」に設定して outerScroller を修正します。復元したい場合は、以前に使用した方の「auto」または「scroll」に戻すことができます。

于 2015-05-27T18:13:18.227 に答える
0

HTML に css "overflow-y: hidden" を追加することで、メイン ドキュメントのスクロールを無効にすることができました。

ポジショニングに全く困りませんでした。

于 2019-10-25T03:38:26.717 に答える
0

イベントに jQuery を使用するソリューションを次に示します。

var stuff = {};
$('#scroller').on('touchstart',stuff,function(e){
  e.data.max = this.scrollHeight - this.offsetHeight;
  e.data.y = e.originalEvent.pageY;
}).on('touchmove',stuff,function(e){
  var dy = e.data.y - e.originalEvent.pageY;
  // if scrolling up and at the top, or down and at the bottom
  if((dy < 0 && this.scrollTop < 1)||(dy > 0 && this.scrollTop >= e.data.max)){
    e.preventDefault();
  };
});
于 2013-07-31T19:19:56.287 に答える