JS implements scroll custom scrolling effect

This article mainly introduces you to the relevant information on how to use JS to implement scroll custom scrolling effect. The article introduces it in detail through sample code. It has certain reference learning value for everyone's study or work. Friends who need it can follow Let’s learn together with the editor. Hope it helps everyone.

Preface

When I was developing a project in the company recently, some things in the native scroll bar could not be customized for fine control, so I developed a browser scroll monitor similar to better-scroll. JS implementation, let's explore what needs to be considered and the process of custom scrolling. Not much to say, let’s take a look at the detailed introduction.

Choose scrolling monitoring events

Because it is a custom scrolling event on the mobile phone, I chose to monitor the three touch events on the mobile phone to implement monitoring, and implemented two For scrolling effects, one is through -webkit-transform and the other is through the top attribute. The two implementations can achieve the basic effect of scrolling, but top is not suitable for scrolling while scrolling, but it can solve the problem of postion:fixed attribute in scrolling; while transform can achieve scrolling while scrolling, but it cannot solve the problem of postion. :fixed problem, so in the end, we selectively consider which implementation method to use. The usage is the same.

Main implementation of business logic

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

Code interpretation: This is the callback for listening to the touchmove event, which mainly calculates the top or -webkit-transform of the target node this.$el The value of translateY, and the calculation reference is mainly based on the vertical movement distance of the event node's screenY. Of course, the maximum and minimum values ​​must also be judged. In order to ensure that the movement can exceed the maximum value and the minimum value by a certain distance, a certain distance is added. 1/3 of mobile computing. The main thing here may be the judgment and calculation of intermittent scrolling, which mainly serves inertial scrolling and aims to make the value of inertial scrolling more accurate.

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

Code interpretation: This is the callback for touchend event monitoring. It is necessary to determine whether to intercept click and tap events, and it is also necessary to calculate the inertial easing value, set the final maximum and minimum values, and set animations. Effects and easing effects. Let’s talk about the calculation of rolling scrolling:

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

Code interpretation: The algorithm of rolling rolling mainly calculates the initial velocity based on a distance and time, and calculates the total rolling speed by the acceleration of the native scrolling greater than 0.006. Displacement. The main thing here is to judge the experience value of 300ms.

Summary

This is the general process and thinking, more functions will be added in the future for expansion

Attached is the git address: https://github.com /yejiaming/scroll

Related recommendations:

About jQuery scrolling plug-in scrollable.js usage analysis

WeChat applet scroll -Detailed explanation of the view component

vue uses better-scroll to implement carousel images and page scrolling

The above is the detailed content of JS implements scroll custom scrolling effect. For more information, please follow other related articles on the PHP Chinese website!