uniapp でデフォルトのスクロールを無効にする方法

モバイル開発では、デフォルトのスクロールを無効にする必要があることがよくあります。たとえば、uniapp を使用して小さなプログラムを開発する場合、シナリオによってはページのデフォルトのスクロールを禁止する必要がある場合、これを実現するために uniapp が提供するいくつかのメソッドを使用する必要があります。

まず、uniapp では、ページがデフォルトでスクロールをサポートしていることを理解する必要があります。したがって、デフォルトのスクロールを無効にしたい場合は、いくつかのトリックを使用する必要があります。

方法 1: 外部コンテナのスタイルを設定する

外部コンテナのスタイルを設定することで、ページのデフォルトのスクロールを無効にできます。具体的な手順は次のとおりです。

1. ページ上に div タグなどの外部コンテナを設定します。
2. overflow:hidden など、外側のコンテナのスタイルを設定します。
3. div タグなど、スクロールを無効にする必要があるページ領域で、スタイル overflow-y:scroll; を設定します。

コード例:

<template>
  <div class="wrapper">
    <div class="content" style="overflow-y: scroll;">
      <!--此处为需要设置滚动的内容区域-->
    </div>
  </div>
</template>

<style>
  .wrapper {
    overflow: hidden;
  }
</style>

上記の方法により、ページのデフォルトのスクロールを無効にする効果を実現できます。

方法 2: JS コードによる実装

ページ構造が比較的複雑である場合、または特定のシナリオでスクロールを制御する必要がある場合は、JS コードを使用してスクロールを無効にする効果を実現できます。 。

具体的な手順は次のとおりです。

1. スクロール コンテナなど、無効にする必要があるページ要素を取得します。
2. touchstart、touchmove、touchend イベントをバインドし、イベント処理関数でデフォルト イベントを防止します。

コード例:

<script>
  export default {
    methods: {
      stopScroll() {
        let el = document.querySelector('.content');
        let startY;
        el.addEventListener('touchstart', (e) => {
          startY = e.touches[0].pageY;
        });
        el.addEventListener('touchmove', (e) => {
          let moveY = e.touches[0].pageY - startY;
          if (el.scrollTop === 0 && moveY > 0) {
            e.preventDefault();
          }
          if (el.scrollTop >= el.scrollHeight - el.offsetHeight && moveY < 0) {
            e.preventDefault();
          }
        });
        el.addEventListener(&#39;touchend&#39;, () => {
          startY = 0;
        });
      },
    },
    mounted() {
      this.stopScroll();
    },
  };
</script>

上記のコードはマウントされたライフサイクルで呼び出され、無効にする必要があるコンテナ要素を取得し、touchStart、touchmove、および touchEnd をバインドします。 、イベント処理関数でスクロールバーのスライドを処理し、スクロールを禁止する効果を実現します。

概要

上記の 2 つの方法により、ページのデフォルトのスクロールを無効にする効果を実現できます。実際のプロジェクト要件に応じて、具体的な実装方法を選択できます。

もちろん、2 番目の方法を使用する場合は、パフォーマンスの問題にも注意する必要があります。スクロールするたびに touchmove イベントがトリガーされ、要素のscrollTopとscrollHeightを再計算する必要があるからです。 。したがって、使用中に、パフォーマンスを向上させるためにコードを可能な限り最適化する必要があります。

以上がuniapp でデフォルトのスクロールを無効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。