モバイルブラウザの上部で下にスクロールして更新する問題を解決する方法

以下のエディターは、モバイルブラウザの上部で下にスクロールするときのWebページのソースまたは更新の問題を完全に解決する記事を共有します。これは良い参考値であり、皆さんに役立つことを願っています。エディターに従って見てみましょう: 問題は以下のとおりです:

通常、このような問題に対処するための属性は「event.preventDefault()」ですが、直接使用すると、次のようになります。ページの内部スクロールも失敗し、スクロールできません。対処方法も同様です。

スライディングエリアは一定方向に移動するため、スライディングブロックの上端からブラウザの上端までの最大距離は0になります（残りは負の値です[$('#bodycthead').offset()。 0 の場合、上に戻ったことを意味します。下に引っ張り続けると反応がなくなり、上に引っ張るとデフォルトのスライドがキャンセルされます。したがって、「event.preventDefault()」は関数にカプセル化する必要があります。

必要なのは、上にスライドするか下にスライドするかを決定し、画面に触れたときに Y 値を記録し (scroll_start = e.changedTouches[0].clientY;)、移動したときに Y 値を生成することだけです (e.changedTouches [0].clientY)、2つの値の差(e.changedTouches[0].clientY-scroll_start)が正の値の場合は下にスライドすることを意味し、負の値の場合はスライドすることを意味します。滑り上がる。

イベント監視の追加:

var scroll_start=0;//定义滑动时的起点
function handler(){//禁止默认滑动函数
 event.preventDefault();
}
document.addEventListener("touchstart",function(e){
 scroll_start = e.changedTouches[0].clientY;//设置起点为触摸时的点
 if($('#bodycthead').offset().top==0){//如果触摸时是滑动块在顶部则禁用默认滑动
  document.addEventListener('touchmove', handler, false);
 }
});
document.addEventListener("touchmove",function(e){
 $("title").html(e.changedTouches[0].clientY-scroll_start);
 if($('#bodycthead').offset().top==0){//想做的是中断滑动并禁用默认滑动，暂时没找到中断的方法
  document.addEventListener('touchmove', handler, false);
 }
 if((e.changedTouches[0].clientY-scroll_start)<0){//如果是向上滑动则恢复默认滑动
  document.removeEventListener(&#39;touchmove&#39;, handler, false);
 }
});

上記は、将来的に皆さんのお役に立てれば幸いです。 関連記事:

Vue2.0でコンポーネントと親子コンポーネントの通信を実装する方法

vue2.0とanimate.cssをマージする方法(詳細なチュートリアル)

での実装方法C# 文字を整数に変換します

vue2.0 で一般的に使用される UI ライブラリは何ですか?

WeChatミニプログラムでスワイパーコンポーネントを使用して画像切り替え表示を実現する方法

JavaScriptで円形の広告ストリップを実装する方法

以上がモバイルブラウザの上部で下にスクロールして更新する問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。