136

私はブラウザベースのアプリに取り組んでいます。現在、iPadサファリブラウザの開発とスタイリングを行っています。

私はiPadで2つのことを探しています：それを必要としないページの垂直スクロールを無効にするにはどうすればよいですか？＆弾性バウンス効果を無効にするにはどうすればよいですか？

4

20 に答える 20

157

非常に古いiOSデバイス用に開発している場合を除き、この回答は適用されなくなります...他のソリューションを参照してください

2011年の回答：iOSSafari内で実行されているweb/ htmlアプリの場合、次のようなものが必要です。

document.ontouchmove = function(event){
    event.preventDefault();
}

iOS 5の場合、次のことを考慮に入れることができます：document.ontouchmoveおよびiOS5でのスクロール

2014年9月の更新：より徹底的なアプローチはここにあります：https ：//github.com/luster-io/prevent-overscroll 。それと多くの有用なウェブアプリのアドバイスについては、http： //www.luster.io/blog/9-29-14-mobile-web-checklist.htmlを参照してください。

2016年3月の更新：その最後のリンクはアクティブではなくなりました-https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklistを参照してください代わりに、アーカイブバージョンの.html 。それを指摘してくれた@falsarellaに感謝します。

于 2011-10-14T17:17:26.727 に答える
123

body/htmlの位置をfixedに変更することもできます。

body,
html {
  position: fixed;
}
于 2015-04-14T13:51:31.443 に答える
73

最新のモバイルブラウザでスクロールしないようにするには、passive：falseを追加する必要があります。私はこの解決策を見つけるまで、これを機能させるために髪を引っ張っていました。私はこれがインターネット上の他の1つの場所で言及されているのを見つけただけです。

function preventDefault(e){
    e.preventDefault();
}

function disableScroll(){
    document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll(){
    document.body.removeEventListener('touchmove', preventDefault);
}

于 2018-04-16T09:02:43.483 に答える
7

このjQueryコードスニペットを使用してこれを行うことができます。

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

これにより、垂直スクロールと、ページで発生するバウンスバック効果がブロックされます。

于 2013-11-26T12:19:22.757 に答える
6 
overflow: scroll;
-webkit-overflow-scrolling: touch;

コンテナでは、要素内でバウンス効果を設定できます

出典：http ：//www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/

于 2015-03-20T09:50:28.437 に答える
4

これは少しゲレンデから外れていることは知っていますが、Swiffyを使用してFlashをインタラクティブなHTML5ゲームに変換し、同じスクロールの問題に遭遇しましたが、機能する解決策は見つかりませんでした。

私が抱えていた問題は、Swiffyステージが画面全体を占めていたため、ロードされるとすぐに、ドキュメントのtouchmoveイベントがトリガーされなかったことです。

同じイベントをSwiffyコンテナに追加しようとすると、ステージが読み込まれるとすぐに置き換えられました。

結局、ステージ内のすべてのDIVにtouchmoveイベントを適用することで、（かなり厄介に）それを解決しました。これらのdivも絶えず変化していたので、私はそれらをチェックし続ける必要がありました。

これは私の解決策であり、うまく機能しているようです。私と同じ解決策を見つけようとしている他の人の役に立つことを願っています。

var divInterval = setInterval(updateDivs,50);
function updateDivs(){
$("#swiffycontainer > div").bind(
    'touchmove',
     function(e) {
        e.preventDefault();
    }
);}
于 2014-03-25T19:25:25.327 に答える
4

ipadサファリを削除するには：スクロールを無効にし、効果をバウンスするためのコード

   document.addEventListener("touchmove", function (e) {
        e.preventDefault();
    }, { passive: false });

ドキュメント内にcanvasタグがある場合、Canvas内のオブジェクトのユーザビリティに影響を与えることがあります（例：オブジェクトの移動）。以下のコードを追加して修正してください。

    document.getElementById("canvasId").addEventListener("touchmove", function (e) {
        e.stopPropagation();
    }, { passive: false });
于 2019-04-15T07:28:13.713 に答える
3

どの解決策も私にはうまくいきません。これが私のやり方です。

  html,body {
      position: fixed;
      overflow: hidden;
    }
  .the_element_that_you_want_to_have_scrolling{
      -webkit-overflow-scrolling: touch;
  }
于 2017-02-05T18:10:45.437 に答える
2

このJSソリューションをお試しください：

var xStart, yStart = 0; 

document.addEventListener('touchstart', function(e) {
    xStart = e.touches[0].screenX;
    yStart = e.touches[0].screenY;
}); 

document.addEventListener('touchmove', function(e) {
    var xMovement = Math.abs(e.touches[0].screenX - xStart);
    var yMovement = Math.abs(e.touches[0].screenY - yStart);
    if((yMovement * 3) > xMovement) {
        e.preventDefault();
    }
});

タッチイベントリスナーを切り離さずに、デフォルトのSafariのスクロールとバウンスジェスチャを防止します。

于 2015-09-04T13:24:23.297 に答える
2

iPhoneでテスト済み。ターゲット要素コンテナでこのcssを使用するだけで、スクロール動作が変更され、指が画面から離れると停止します。

-webkit-overflow-scrolling: auto

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

于 2017-10-13T14:23:37.490 に答える
1

MyScript Webアプリを使用していて、実際に書くのではなく、本体のスクロール/ドラッグ（iPadおよびタブレットの場合）に苦労している場合：

<body touch-action="none" unresolved>

それは私のためにそれを修正しました。

于 2017-06-30T19:24:54.267 に答える
1

スクロールを防ぐためにjsを使用できます。

let body = document.body;

let hideScroll = function(e) {
  e.preventDefault();
};

function toggleScroll (bool) {

  if (bool === true) {
    body.addEventListener("touchmove", hideScroll);
  } else {
    body.removeEventListener("touchmove", hideScroll);
  }
}

そして、 toggleScrollモーダルを操作/閉じるときにfuncを実行/停止するだけではありません。

このような toggleScroll(true) / toggleScroll(false)

（これはiOS専用で、Androidでは機能しません）

于 2018-02-03T12:33:34.190 に答える
1

webkitOverflowScrollingスタイルを切り替えるこのJSソリューションを試してください。ここでの秘訣は、このスタイルがオフになっていることです。モバイルSafariは通常のスクロールに移行し、オーバーバウンスを防ぎます。残念ながら、進行中のドラッグをキャンセルすることはできません。この複雑なソリューションはonscroll、上からの跳ね返りscrollTopが追跡される可能性のあるネガティブになるときにも追跡します。このソリューションはiOS12.1.1でテストされており、1つの欠点があります。スクロールを加速している間、スタイルをリセットしてもすぐにキャンセルされない可能性があるため、シングルオーバーバウンスが発生します。

function preventScrollVerticalBounceEffect(container) {
  setTouchScroll(true) //!: enable before the first scroll attempt

  container.addEventListener("touchstart", onTouchStart)
  container.addEventListener("touchmove", onTouch, { passive: false })
  container.addEventListener("touchend", onTouchEnd)
  container.addEventListener("scroll", onScroll)

  function isTouchScroll() {
    return !!container.style.webkitOverflowScrolling
  }

  let prevScrollTop = 0, prevTouchY, opid = 0

  function setTouchScroll(on) {
    container.style.webkitOverflowScrolling = on ? "touch" : null

    //Hint: auto-enabling after a small pause makes the start
    // smoothly accelerated as required. After the pause the
    // scroll position is settled, and there is no delta to
    // make over-bounce by dragging the finger. But still,
    // accelerated content makes short single over-bounce
    // as acceleration may not be off instantly.

    const xopid = ++opid
    !on && setTimeout(() => (xopid === opid) && setTouchScroll(true), 250)

    if(!on && container.scrollTop < 16)
      container.scrollTop = 0
    prevScrollTop = container.scrollTop
  }

  function isBounceOverTop() {
    const dY = container.scrollTop - prevScrollTop
    return dY < 0 && container.scrollTop < 16
  }

  function isBounceOverBottom(touchY) {
    const dY = touchY - prevTouchY

    //Hint: trying to bounce over the bottom, the finger moves
    // up the screen, thus Y becomes smaller. We prevent this.

    return dY < 0 && container.scrollHeight - 16 <=
      container.scrollTop + container.offsetHeight
  }

  function onTouchStart(e) {
    prevTouchY = e.touches[0].pageY
  }

  function onTouch(e) {
    const touchY = e.touches[0].pageY

    if(isBounceOverBottom(touchY)) {
      if(isTouchScroll())
        setTouchScroll(false)
      e.preventDefault()
    }

    prevTouchY = touchY
  }

  function onTouchEnd() {
    prevTouchY = undefined
  }

  function onScroll() {
    if(isTouchScroll() && isBounceOverTop()) {
      setTouchScroll(false)
    }
  }
}
于 2019-01-15T17:20:06.540 に答える
1

改善された回答@BenBosと@Timによるコメント

このcssは、位置が変更された/幅と高さがなくても少し遅れるため、cssの再レンダリングでのスクロールとパフォーマンスの問題を防ぐのに役立ちます

html,
body {
  position: fixed;
  width: 100%; 
  height: 100%
}
于 2019-08-14T07:21:42.747 に答える
1

次のアーキテクチャを検討してください。

<body> <div id="root"></div> </body>

このcssは機能します：

#root { position: fixed; height: 100%; overflow: auto; }
于 2021-03-02T10:35:01.680 に答える
0

バウンスを取り除きたくないが、バウンスがいつ停止するかを知りたい（たとえば、画面距離の計算を開始する）場合は、次のようにすることができます（コンテナーはオーバーフローするコンテナー要素です）。

    const isBouncing = this.container.scrollTop < 0 ||
    this.container.scrollTop + this.container.offsetHeight >
        this.container.scrollHeight
于 2020-06-09T12:34:18.903 に答える
0

サファリバウンススクロール効果を無効にします。

html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
  position: fixed;
}
于 2020-07-05T05:51:22.553 に答える
0

スクロール付きのメニューが開いていて、スクロールの高さの上部または下部にあるときに、バックグラウンドでhtml要素を取得する際に問題が発生しました。たくさんやってみました。htmlの位置をfixedに設定すると、画面をロックするのに最も近くなりましたが、PWAでは、下部に白い領域ができて、修正できませんでした。最後に、私は私のために働いた解決策を見つけました：

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    height: calc(100vh - 1px)
    overflow: hidden;
    background-color: 'Whatever color you need to hide the 1px at the bottom'
}

これはiOSでのみ問題になるように思われるため、iPhoneXから12ProMaxまでのデバイスをターゲットにしました。

body {
    margin: 0;
    overflow: hidden;
    background-color: '#TIP: You can use the color picker from the inspector';

    @media only screen and (min-width: 375px) and (max-height: 926px) and (-webkit-device-pixel-ratio: 3) {
        height: calc(100vh - 1px);
    }
}

これにより、htmlまたはbody要素でのスクロール、タッチ、またはグラブが防止され、メニューまたはその他の指定された場所でスクロールが引き続き機能します。乾杯。

于 2021-10-07T10:38:31.690 に答える
-1

怒っているキウイと同様に、位置ではなく高さを使用して機能させることができました。

html,body {
  height: 100%;
  overflow: hidden;
}

.the_element_that_you_want_to_have_scrolling{
  -webkit-overflow-scrolling: touch;
}
于 2017-06-12T13:02:07.987 に答える
-1

ソリューションテスト済み、iOS12.xで動作

これは私が遭遇した問題です：

<body> <!-- the whole body can be scroll vertically -->
  <article>

    <my_gallery> <!-- some picture gallery, can be scroll horizontally -->
    </my_gallery>

  </article>
</body>

ギャラリーをスクロールしている間、本体は常にスクロールします（人間のスワイプは実際には水平ではありません）。そのため、ギャラリーは役に立たなくなります。

ギャラリーがスクロールし始めている間に私がしたことは次のとおりです

var html=jQuery('html');
html.css('overflow-y', 'hidden');
//above code works on mobile Chrome/Edge/Firefox
document.ontouchmove=function(e){e.preventDefault();} //Add this only for mobile Safari

そして、私のギャラリーがスクロールを終了すると...

var html=jQuery('html');
html.css('overflow-y', 'scroll');
document.ontouchmove=function(e){return true;}

これがお役に立てば幸いです〜

于 2019-04-15T02:45:04.470 に答える