ホームページ > 記事 > ウェブフロントエンド > JS はスクロールのカスタムスクロール効果を実装します

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

小云云オリジナル: 2018-01-15 13:16:022072ブラウズ

この記事では、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 + &#39;px&#39;;
 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"] = &#39;500ms&#39;;
 this.$el.style["transitionTimingFunction"] = &#39;ease-out&#39;;
 /*确定最终的滚动位置*/
 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

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

関連記事