집 > 기사 > 웹 프론트엔드 > JS는 스크롤 사용자 정의 스크롤 효과를 구현합니다.

JS는 스크롤 사용자 정의 스크롤 효과를 구현합니다.

小云云원래의: 2018-01-15 13:16:022028검색

이 기사에서는 JS를 사용하여 스크롤 사용자 정의 스크롤 효과를 구현하는 방법에 대한 관련 정보를 주로 소개합니다. 이 기사는 샘플 코드를 통해 이를 매우 자세하게 소개합니다. 이 기사는 따라야 하는 모든 사람의 학습이나 참조에 도움이 됩니다. 아래에서 함께 배워봅시다. 그것이 모두에게 도움이 되기를 바랍니다.

머리말

최근 회사에서 프로젝트를 개발할 때 기본 스크롤 막대의 일부 항목을 세부적으로 제어할 수 없어서 better-scroll과 유사한 브라우저 스크롤 모니터링의 JS 구현을 개발했습니다. 아래에서 고려해야 할 사항과 스크롤 사용자 정의와 관련된 프로세스를 살펴보세요. 할 말이 많지 않으니, 자세한 소개를 살펴보겠습니다.

스크롤링 모니터링 이벤트 선택

휴대폰의 커스텀 스크롤 이벤트이기 때문에 모니터링을 구현하기 위해 휴대폰에서 3개의 터치 이벤트를 모니터링하기로 선택했고, 두 가지 스크롤 효과를 구현했습니다. 하나는 -webkit- 변환을 통해, 하나는 top 속성을 통해서입니다. 두 가지 구현은 스크롤의 기본 효과를 얻을 수 있지만 top은 스크롤하는 동안 스크롤하는 데 적합하지 않지만 스크롤의 position:fixed 속성 문제를 해결할 수 있지만 변환은 스크롤하는 동안 스크롤을 달성할 수 있지만 문제를 해결할 수는 없습니다. position.:문제가 수정되었으므로 결국 어떤 구현 방법을 사용할 것인지 선택적으로 고려합니다.

주로 비즈니스 로직 구현

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는 스크롤 사용자 정의 스크롤 효과를 구현합니다.

관련 기사