JS はスクロールのカスタムスクロール効果を実装します

この記事では、JS を使用してスクロールのカスタム スクロール効果を実装する方法について主に紹介し、サンプル コードを通じて詳細に紹介します。この記事は、学習や仕事に必要な学習に役立ちます。以下、一緒に学びましょう。皆さんのお役に立てれば幸いです。

まえがき

最近、会社でプロジェクトを開発していたところ、ネイティブのスクロールバーの一部が細かい制御用にカスタマイズできなかったので、better-scrollに似たブラウザのスクロール監視のJS実装を開発しました。以下では、スクロールのカスタマイズに必要な考慮事項とそのプロセスについて説明します。多くを語る必要はありません。詳細な紹介を見てみましょう。

スクロール監視イベントを選択します

これは携帯電話上のカスタム スクロール イベントであるため、監視を実装するために携帯電話上の 3 つのタッチ イベントを監視することを選択し、2 つのスクロール効果を実装しました。1 つは -webkit-transform によるもので、 1 つは、top 属性を介したものです。 2 つの実装はスクロールの基本的な効果を実現できますが、top はスクロール中のスクロールには適していませんが、スクロールの postion:fixed 属性の問題は解決できますが、transform はスクロール中のスクロールを実現できますが、次の問題は解決できません。 :問題を修正したので、最終的にはどの実装方法を使用するかを選択的に検討します。

主にビジネス ロジックを実装します

handleTouchMove(event){
 event.preventDefault();
 this.currentY = event.targetTouches[0].screenY;
 this.currentTime = new Date().getTime();
 // 二次及以上次数滚动（间歇性滚动）时间和路程重置计算，0.05是间歇性滚动的停顿位移和时间比
 if (Math.abs(this.currentY - this.lastY) / Math.abs(this.currentTime - this.lastTime) < 0.05) {
  this.startTime = new Date().getTime();
  this.resetY = this.currentY;
 }
 this.distance = this.currentY - this.startY;
 let temDis = this.distance + this.oldY;
 /*设置移动最小值*/
 temDis = temDis > this.minValue ? temDis * 1 / 3 : temDis;
 /*设置移动最大值*/
 temDis = temDis < -this.maxValue ? -this.maxValue + (temDis + this.maxValue) * 1 / 3 : temDis;
 this.$el.style["top"] = temDis + 'px';
 this.lastY = this.currentY;
 this.lastTime = this.currentTime;
 this.dispatchEvent();
 this.scrollFunc(event);
},

コード解釈: これは touchmove イベントをリッスンするためのコールバックであり、主にターゲット ノードの先頭 this.$el または -webkit-transform のtranslateY の値を計算します。計算の基準は主にイベントノードのscreenYの垂直移動距離を基準として使用されます。もちろん、移動が最大値と最小値を超えることができるかどうかを判断する必要があります。一定距離離れると1/3の移動計算が加算されます。ここでの主なものは断続スクロールの判断と計算であり、これは主に慣性スクロールとして機能し、慣性スクロールの値をより正確にすることを目的としています。

handleTouchEnd(event){
 /*点透事件允许通过*/
 if (!this.distance) return;
 event.preventDefault();
 let temDis = this.distance + this.oldY;
 /*计算缓动值*/
 temDis = this.computeSlowMotion(temDis);
 /*设置最小值*/
 temDis = temDis > this.minValue ? this.minValue : temDis;
 /*设置最大值*/
 temDis = temDis < -this.maxValue ? -this.maxValue : temDis;
 this.$el.style["transitionDuration"] = '500ms';
 this.$el.style["transitionTimingFunction"] = 'ease-out';
 /*确定最终的滚动位置*/
 setTimeout(()=> {
  this.$el.style["top"] = temDis + 'px';
 }, 0);
 // 判断使用哪一种监听事件
 if (this.slowMotionFlag) {
  this.dispatchEventLoop();
 } else {
  this.dispatchEvent();
 }
 this.$el.addEventListener('transitionend', ()=> {
  window.cancelAnimationFrame(this.timer);
 });
 this.scrollFunc(event);
}

コード解釈: これはタッチエンド イベント監視のコールバックであり、クリック イベントとタップ イベントをインターセプトするかどうかを決定する必要があり、慣性イージング値を計算し、最終的な最大値と最小値を設定し、アニメーション効果と緩和効果。ローリングローリングの計算について話しましょう:

// 计算惯性滚动值
computeSlowMotion(temDis){
 var duration = new Date().getTime() - this.startTime;
 // 300毫秒是判断间隔的最佳时间
 var resetDistance = this.currentY - this.resetY;
 if (duration < 300 && Math.abs(resetDistance) > 10) {
  var speed = Math.abs(resetDistance) / duration,
   destination;
  // 末速度为0 距离等于初速度的平方除以2倍加速度
  destination = (speed * speed) / (2 * this.deceleration) * (resetDistance < 0 ? -1 : 1);
  this.slowMotionFlag = true;
  return temDis += destination;
 } else {
  this.slowMotionFlag = false;
  return temDis;
 }
},

コード解釈: ローリングローリングのアルゴリズムは、主に距離と時間に基づいて初速度を計算し、元のローリングの加速度に基づいてローリングの総変位を計算します。 0.006。ここで重要なのは300msの経験値を判断することです。

概要

これは一般的なプロセスと考え方です。拡張のために将来さらに多くの機能が追加される予定です

Git アドレスを添付します: https://github.com/yejiaming/scroll

関連する推奨事項:

jQueryスクロールプラグインscrollable.jsの使用分析について

WeChatアプレットのスクロールビューコンポーネントの詳細な説明

vueはベタースクロールを使用してカルーセル画像とページスクロールを実装します

以上がJS はスクロールのカスタムスクロール効果を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。