Vue を使用してカスタム スクロール バーを実装するにはどうすればよいですか?

Vue は、開発者が豊富な対話性を備えた Web アプリケーションを作成するのに役立つ人気の JavaScript フレームワークです。スクロールバーは Web アプリケーションにおいて非常に重要な要素ですが、ブラウザーのデフォルトのスクロールバーは多くの場合見苦しく、あらゆる状況に適しているわけではありません。この記事では、Vueを使ってカスタムスクロールバーを実装する方法を紹介します。

ステップ 1: コンテナを作成する

まず、コンテナを作成する必要があります。リストを含む div コンテナを作成しましょう:

<div class="container">
  <ul class="list">
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
</div>

コンテナを設定する必要があります。スクロール可能であり、デフォルトのスクロールバーを非表示にする必要があります。 CSS スタイルを追加しましょう:

.container {
  height: 300px;
  overflow: hidden;
  position: relative;
}

.list {
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
  overflow-y: scroll;
}

::-webkit-scrollbar {
  width: 0.5em;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 16px;
}

ここでは、コンテナの高さを 300px に設定し、カスタム スクロールバーを使用できるようにデフォルトのスクロールバーを非表示にします。

ステップ 2: スクロール イベント リスナーをバインドする

カスタム スクロール バーの位置を更新できるように、コンテナーのスクロール イベントをリッスンする必要があります。 Vue では、@scroll 属性を使用してイベント リスナーをバインドできます。

<div class="container" @scroll="onScroll">
  <ul class="list">
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
</div>

ここでは、スクロール イベントのコールバック関数として onScroll メソッドを使用します。コンテナがスクロールされるとメソッドがトリガーされます。ここで、Vue のインスタンスで onScroll メソッドを定義しましょう。

new Vue({
  el: '#app',
  data: {
    items: [], // 数据数组
    scrollTop: 0, // 当前滚动位置
    containerHeight: 0, // 容器高度
    listHeight: 0, // 列表高度
    thumbHeight: 0, // 滚动条高度
  },
  created() {
    // 加载数据
    this.loadData();
  },
  methods: {
    // 滚动事件回调函数
    onScroll(event) {
      this.scrollTop = event.target.scrollTop;
      this.thumbHeight = this.containerHeight / this.listHeight * this.containerHeight;
    },
    // 加载数据
    loadData() {
      // 向服务器请求数据，这里省略具体实现
    },
  },
});

onScroll メソッドで、scrollTop## の値を更新します。 # プロパティ。コンテナのスクロール位置です。また、コンテナーのスクロール量と一致するように、カスタム スクロールバーの高さも計算しました。

次に、カスタム スクロール バーをテンプレートに追加しましょう:

<div class="container" ref="container" @scroll="onScroll">
  <ul class="list" ref="list">
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
  <div class="scrollbar" :style="{ height: thumbHeight + 'px', top: scrollTop + 'px' }"></div>
</div>

ここでは、カスタム スクロール バーを表す新しい div 要素をコンテナーに追加しました。

thumbHeight と scrollTop を div 要素の高さと上部の位置にバインドします。

最後に、コンテナとリストの高さを正しく計算できるように、いくつかの計算されたプロパティを更新する必要があります。

computed: {
  // 容器高度
  containerHeight() {
    return this.$refs.container.offsetHeight;
  },
  // 列表高度
  listHeight() {
    return this.$refs.list.offsetHeight;
  },
},

これで、カスタム スクロールバーの実装が完了しました。アプリケーションを実行すると、コンテナーにリストをスクロールするカスタム スクロールバーがあることがわかります。

概要

この記事では、Vue を使用してカスタム スクロール バーを実装する方法を紹介しました。まずコンテナを作成し、次にスタイルとイベント リスナーを追加します。また、テンプレートと計算されたプロパティを使用してカスタム スクロールバーも追加しました。練習するにつれて、トラックの追加やエフェクトのドラッグなど、より多くのカスタム スクロールバー オプションを探索できます。どのような選択をしても、Vue を使用すると、Web アプリケーションで高度にカスタマイズされたスクロール エクスペリエンスが可能になります。

以上がVue を使用してカスタム スクロール バーを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。