必要
ここ数日、大画面の視覚化プロジェクトに取り組んでいるときに、特定の領域にスクロール バーが表示されたときに、スクロールしてデータをループ表示させるという要件に遭遇しました。
もちろん、優れた開発として、最適化することもできます:マウスが配置されたら、自動スクロールを停止し、マウスを領域の外に移動して、再びスクロールを開始します。
達成
基本的な実装のアイデア
関数を実現する前に、3 つのパラメーターを理解する必要があります。
- 視覚的な高さclientHeight
- スクロールバーの上端からの高さscrollTop
- スクロール領域の高さscrollHeight
上の図の情報によると、スクロール バーの自動スクロール ロジックを簡単に実装できます。
scrollHeightがclientHeightより大きい場合、要素をスクロールする必要があります。
コードに変換:
// 获取滚动区域的DOM
let parentDom = document.getElementById("XXX")
// 判断是否有滚动条
if(parentDom.scrollHeight <= parentDom.clientHeight) return
// 如果滚动到底部,scrollTop = 0;
if (
parentDom.scrollTop + parentDom.clientHeight ===
parentDom.scrollHeight
) {
parentDom.scrollTop = 0;
} else {
// 滚动条自增
parentDom.scrollTop++;
}
もちろん、このロジックを繰り返し実行できるようにタイマーを設定する必要があります。
const scroll = () => {
// 上述代码
};
let timer= setInterval(scroll, 100);
この時点で、私たちの基本的なアイデアは完成しています。プロジェクトにスクロールが必要な領域が複数ある場合は、このメソッドをカプセル化して再利用する必要があります。
コードのカプセル化と再利用
コードをカプセル化するための例として、主流の vue を取り上げてみましょう. 最も適切な方法は、 vue でコマンドとして使用することです.
以下のチュートリアルを読むには、vue コマンドの基本的な知識が必要です。vue公式 Web サイト のチュートリアルを参照できます。
命令の基本構造
まず、scroll.jsファイルを作成し、命令の最も基本的な構造を記述します。
// 实现滚动条自动滚动功能
const directive = {
inserted(el, binding) {
...
},
};
export default directive
このファイルを main.js に導入します
import Vue from "vue";
import App from "./App.vue";
import directive from "./change";
Vue.config.productionTip = false;
// 注册名为 scroll 的指令
Vue.directive("scroll", directive);
new Vue({
render: (h) => h(App),
}).$mount("#app");
この時点で、 v-scrollというコマンドを作成し、直接使用します
// App.vue
<template>
<div id="app" v-scroll>
// XXXXX这里是您的自定义html
</div>
</template>
完璧な命令
オリジナルの実装アイデアと組み合わせて、指示を改善できます
// js实现动态变化的数字
const directive = {
inserted(el) {
//el就是绑定的dom对象
if (!el) return;
const scroll = () => {
let parentDom = el;
// 判断是否有滚动条
if(parentDom.scrollHeight <= parentDom.clientHeight) return
//判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
if (
parentDom.scrollTop + parentDom.clientHeight ===
parentDom.scrollHeight
) {
parentDom.scrollTop = 0;
} else {
parentDom.scrollTop++; // 元素自增距离顶部
}
};
let timer = setInterval(scroll, 100);
};
export default directive;
これでコマンドの機能は完了です。もちろん、マウスがこの要素に移動すると、自動的に停止することはできず、この領域から離れても自動スクロールを再開できないという欠点があります。dom でonmouseenterおよびonmouseleaveイベントをバインドするだけで済みます。
inserted(el) {
// .....
let timer = setInterval(scroll, rate);
el.onmouseenter = () => {
clearInterval(timer);
timer = null;
};
el.onmouseleave = function () {
timer = setInterval(scroll, 100);
};
},
},
値によるコマンド
さらに良いことに、要素に値を渡すことで、このスクロール速度をカスタマイズすることもできます。vue 命令フック関数の2 番目のパラメーターbinding.value は、パラメーターを受け入れることができます。
// App.vue
<template>
<div id="app" v-scroll="100">
// XXXXX这里是您的自定义html
</div>
</template>
この時点で、binding.valueの値は100 であり、コードをさらに最適化します。
inserted(el, binding) {
const rate = binding?.value ?? 100;
if (!el) return;
const scroll = () => {
// ...省略
};
let timer: any = setInterval(scroll, rate);
el.onmouseenter = () => {
clearInterval(timer);
timer = null;
};
el.onmouseleave = function () {
timer = setInterval(scroll, rate);
};
},
あなたは終わった！!
読んで何か得したならワンクリックトリプルコンボ！