JS implémente un effet de défilement personnalisé

Cet article vous présente principalement les informations pertinentes sur la façon d'utiliser JS pour implémenter l'effet de défilement personnalisé. L'article le présente en détail à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de chacun. ça peut suivre Apprenons avec l’éditeur. J'espère que cela aide tout le monde.

Avant-propos

Lorsque je développais récemment un projet dans l'entreprise, certaines choses dans la barre de défilement native ne pouvaient pas être personnalisées pour un contrôle précis, j'ai donc développé un moniteur de défilement du navigateur similaire à Better- scroll. Implémentation JS, explorons ce qui doit être pris en compte et le processus de défilement personnalisé. Pas grand chose à dire, jetons un œil à l’introduction détaillée.

Sélectionnez les événements de surveillance du défilement

Comme il s'agit d'un événement de défilement personnalisé sur le téléphone mobile, j'ai choisi de surveiller trois événements tactiles sur le téléphone mobile pour mettre en œuvre la surveillance, et j'en ai mis en œuvre deux pour effets de défilement, l'un via -webkit-transform et l'autre via l'attribut top. Les deux implémentations peuvent obtenir l'effet de base du défilement, mais top ne convient pas au défilement pendant le défilement, mais cela peut résoudre le problème de l'attribut postion:fixed dans le défilement tandis que transform peut réaliser le défilement pendant le défilement, mais il ne peut pas résoudre le problème. problème de position. : problème résolu, donc à la fin, nous considérons sélectivement quelle méthode d'implémentation utiliser.

Implémentation principale de la logique métier

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);
},

Interprétation du code : il s'agit du rappel pour écouter l'événement touchmove, qui calcule principalement le sommet ou -webkit- du nœud cible this.$el La valeur de translationY dans transform, et la référence de calcul est principalement basée sur la distance de mouvement vertical de l'écranY du nœud d'événement. Bien entendu, les valeurs maximales et minimales doivent également être jugées afin de garantir que le. le mouvement peut dépasser la valeur maximale et la valeur minimale d'une certaine distance, alors ajoutez C'est un calcul de 1/3 de mouvement. L'essentiel ici peut être le jugement et le calcul du défilement intermittent, qui sert principalement au défilement inertiel et vise à rendre la valeur du défilement inertiel plus précise.

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);
}

Interprétation du code : il s'agit du rappel pour la surveillance des événements touchend, où il est nécessaire de déterminer s'il faut intercepter les événements de clic et de pression, et également calculer la valeur d'assouplissement de l'inertie, définir les valeurs finales maximale et minimale. et Définir les effets d'animation et les effets d'assouplissement. Parlons du calcul du défilement roulant :

// 计算惯性滚动值
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;
 }
},

Interprétation du code : L'algorithme de roulement roulant calcule principalement la vitesse initiale en fonction d'une distance et d'un temps, et calcule le roulement si l'accélération du défilement natif est plus grande que 0,006 déplacement total. L'essentiel ici est de juger de la valeur d'expérience de 300 ms.

Résumé

Il s'agit du processus et de la réflexion généraux, d'autres fonctions seront ajoutées à l'avenir pour l'expansion

L'adresse git est ci-jointe : https://github.com /yejiaming/scroll

Recommandations associées :

À propos de l'analyse de l'utilisation du plug-in de défilement jQuery scrollable.js

Applet WeChat scroll -Explication détaillée du composant d'affichage

vue utilise better-scroll pour implémenter des images de carrousel et le défilement de page

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!