ES6實現全螢幕滾動插件步驟詳解-js教程-PHP中文網

首頁

web前端

js教程

ES6實現全螢幕滾動插件步驟詳解

php中世界最好的语言

May 14, 2018 pm 02:01 PM

外掛步驟捲動

這次帶給大家ES6實現全螢幕滾動外掛步驟詳解，ES6實現全螢幕滾動外掛程式使用的注意事項有哪些，以下就是實戰案例，一起來看一下。

1）前面的話

現在已經有很多全螢幕滾動插件了，例如著名的fullPage ，那為什麼還要自己造輪子呢？

現有輪子有以下問題：

首先，最大的問題是最受歡迎的幾個插件都依賴jQuery，這意味著在使用React 或Vue 的專案中使用他們是一件十分蛋疼的事：我只需要一個全螢幕滾動功能，卻還需要把jQuery 引入，有種殺雞使用宰牛刀的感覺；
其次，現有的許多全螢幕滾動插件功能往往都十分豐富，這在前幾年是優勢，但現在（2018-5）可以看作是劣勢：前端開發已經發生了很大變化，其中很重要的一個變化是ES6 原生支援模組化開發，模組化開發最大的特點是一個模組最好只專注做好一件事，然後再拼成一個完整的系統，從這個角度看，大而全的插件有悖模組化開發的原則。

對比之下，透過原生語言造輪子有以下好處：

#使用原生語言編寫的插件，自身不會受依賴的插件的使用場景而影響自身的使用（現在依賴jQuery 的插件非常不適合開發單頁面應用），所以使用上更加靈活；
搭配模組化開發，使用原生語言開發的插件可以只專注於一個功能，所以程式碼量可以很少；
最後，隨著JS/CSS/HTML 的發展以及瀏覽器不斷迭代更新，現在使用原生語言編寫插件的開發成本越來越低，那為什麼不呢？

2）實作原理及程式碼架構

#2.1 實作原理

實作原理見下圖：容器及容器內的頁面取目前可視區高度，同時容器的父級元素overflow 屬性值設為hidden ，透過更改容器top 值來實現全螢幕滾動效果。

2.2 程式碼架構

程式碼編寫的想法是透過class 定義全螢幕滾動類，使用時透過 new PureFullPage().init() 使用。

/**
 * 全屏滚动类
 */
class PureFullPage {
 // 构造函数
 constructor() {}
 // 原型方法
 methods() {}
 // 初始化函数
 init() {}
}

登入後複製

3）html 結構

#鑑於上述實作原理，對於html 的結構有特定要求，如下：頁面容器為#pureFullPageContainer ，所有的頁面為其直接子元素，這裡為了方便，直接取body 為其直接父元素。

<body>
 <p id="pureFullPageContainer">
  <p class="page"></p>
  <p class="page"></p>
  <p class="page"></p>
 </p>
</body>

登入後複製

4）css 設定

首先，容器及容器內的頁面取目前視覺區高度，為每次切換顯示一個完整的頁面做準備；

第二，容器的父級元素（這裡是body ） overflow 屬性值定為hidden ，這樣可以保證每次只會顯示一個頁面，其他頁面被隱藏。

經過上述設置，對容器top 值，每次更改一個可視區高度的距離，便實現了頁間的切換，部分程式碼如下：

body {
 /* body 为容器直接的父元素 */
 overflow: hidden;
}
#pureFullPage {
 /* 只有当 position 的值不是 static 时，top 值才有效 */
 position: relative;
 /* 设置初始值 */
 top: 0;
}
.page {
 /* 此处不能为 100vh，后面详述 */
 /* 其父元素，也就是 #pureFullPage 的高度，通过 js 动态设置*/
 height: 100%;
}

登入後複製

Notice：

容器的position 屬性值需要設定為relative ，因為top 只有在position 屬性值不為static 時才有效；

頁面高度需設定為目前視覺區高度，但不能直接設定為100vh ，因為safari 手機瀏覽器把地址欄算進去計算100vh ，但地址欄下面的不應該算做“可視區”，畢竟實際上是“看不見”的區域。這會導致 100vh 對應的像素值比 document.documentElement.clientHeight 所取得的像素值大。這樣在切換 top 值時就不是全螢幕切換了，實際上，這種情況下切換的高度小於頁面的高度。

解决 safari 手机浏览器可视区高度问题：既然通过 js 获取的 document.documentElement.clientHeight 值是符合预期的可视区高度（不包括顶部地址栏和底部工具栏），那就将该值通过 js 设置为容器的高度，同时，容器内的页面高度设置为 100% ，这样就可以保证容器及页面的高度和切换 top 值相同了，也就保证了全屏切换。

// 伪代码
'#pureFullPage'.style.height = document.documentElement.clientHeight + 'px';

登入後複製

5）监控滚动/滑动事件

这里的滚动/滑动事件包括鼠标滚动、触摸板滑动以及手机屏幕上下滑动。

5.1 PC 端

PC 端主要解决的问题是获取鼠标滚动或触摸板滑动方向，触摸板上下滑动和鼠标滚动绑定的是同一个事件：

firefox 是 DOMMouseScroll 事件，对应的滚轮信息（向前滚还是向后滚）存储在 detail 属性中，向前滚，这个属性值是 3 的倍数，反之，是 -3 的倍数；
firefox 之外的其他浏览器是 mousewheel 事件，对应的滚轮信息存储在 wheelDelta 属性中，向前滚，这个属性值是 -120 的倍数，反之， 120 的倍数。

macOS 如此，windows 相反？

所以，可以通过 detail 或 wheelDelta 的值判断鼠标的滚动方向，进而控制页面是向上还是向下滚动。在这里我们只关心正负，不关心具体值的大小，为了便于使用，下面基于这两个事件封装了一个函数：如果鼠标往前滚动，返回负数，反之，返回正数，代码如下：

// 鼠标滚轮事件
getWheelDelta(event) {
 if (event.wheelDelta) {
  return event.wheelDelta;
 } else {
  // 兼容火狐
  return -event.detail;
 }
},

登入後複製

有了滚动事件，就可以据此编写页面向上或者向下滚动的回调函数了，如下：

// 鼠标滚动逻辑（全屏滚动关键逻辑）
scrollMouse(event) {
 let delta = utils.getWheelDelta(event);
 // delta < 0，鼠标往前滚动，页面向下滚动
 if (delta < 0) {
  this.goDown();
 } else {
  this.goUp();
 }
}

登入後複製

goDown 、 goUp 是页面滚动的逻辑代码，需要特别说明的是必须判断滚动边界，保证容器中显示的始终是页面内容：

上边界容易确定，为 1 个页面（也即可视区）的高度，即如果容器当前的上外边框距离整个页面顶部的距离（这里此值正是容器的 offsetTop 值的绝对值，因为它父元素的 offsetTop 值都是 0 ）大于等于当前可视区高度时，才允许向上滚动，不然，就证明上面已经没有页面了，不允许继续向上滚动；
下边界为 n - 2 （n 表示全屏滚动的页面数）个可视区的高度，当容器的 offsetTop 值的绝对值小于等于 n - 2 个可视区的高度时，表示还可以向下滚动一个页面。

具体代码如下：

goUp() {
 // 只有页面顶部还有页面时页面向上滚动
 if (-this.container.offsetTop >= this.viewHeight) {
  // 重新指定当前页面距视图顶部的距离 currentPosition，实现全屏滚动，
  // currentPosition 为负值，越大表示超出顶部部分越少
  this.currentPosition = this.currentPosition + this.viewHeight;
  this.turnPage(this.currentPosition);
 }
}
goDown() {
 // 只有页面底部还有页面时页面向下滚动
 if (-this.container.offsetTop <= this.viewHeight * (this.pagesNum - 2)) {
  // 重新指定当前页面距视图顶部的距离 currentPosition，实现全屏滚动，
  // currentPosition 为负值，越小表示超出顶部部分越多
  this.currentPosition = this.currentPosition - this.viewHeight;
  this.turnPage(this.currentPosition);
 }
}

登入後複製

最后添加滚动事件：

// 鼠标滚轮监听，火狐鼠标滚动事件不同其他
if (navigator.userAgent.toLowerCase().indexOf(&#39;firefox&#39;) === -1) {
 document.addEventListener(&#39;mousewheel&#39;, scrollMouse);
} else {
 document.addEventListener(&#39;DOMMouseScroll&#39;, scrollMouse);
}

登入後複製

5.2 移动端

移动端需要判断是向上还是向下滑动，可以结合 touchstart （手指开始接触屏幕时触发）和 touchend （手指离开屏幕时触发）两个事件实现判断：分别获取两个事件开始触发时的 pageY 值，如果触摸结束时的 pageY 大于触摸开始时的 pageY ，表示手指向下滑动，对应页面向上滚动，反之亦然。

此处我们需要触摸事件跟踪触摸的属性：

touches ：当前跟踪的触摸操作的 Touch 对象的数组，用于获取触摸开始时的 pageY 值；
changeTouches ：自上次触摸以来发生了改变的 Touch 对象的数组，用于获取触摸触摸结束时的 pageY 值。

相关代码如下：

// 手指接触屏幕
document.addEventListener(&#39;touchstart&#39;, event => {
 this.startY = event.touches[0].pageY;
});
//手指离开屏幕
document.addEventListener('touchend', event => {
 let endY = event.changedTouches[0].pageY;
 if (endY - this.startY < 0) {
  // 手指向上滑动，对应页面向下滚动
  this.goDown();
 } else {
  // 手指向下滑动，对应页面向上滚动
  this.goUp();
 }
});

登入後複製

为了避免下拉刷新，可以阻止 touchmove 事件的默认行为：

// 阻止 touchmove 下拉刷新
document.addEventListener(&#39;touchmove&#39;, event => {
 event.preventDefault();
});

登入後複製

6）PC 端滚动事件性能优化

6.1 防抖函数和截流函数介绍

优化主要从两方便入手：

更改页面大小时，通过防抖动（debounce）函数限制 resize 事件触发频率；
滚动/滑动事件触发时，通过截流（throttle）函数限制滚动/滑动事件触发频率。

既然都是限制触发频率（都通过定时器实现），那这两者有什么区别？

首先，防抖动函数工作时，如果在指定的延迟时间内，某个事件连续触发，那么绑定在这个事件上的回调函数永远不会触发，只有在延迟时间内，这个事件没再触发，对应的回调函数才会执行。防抖动函数非常适合改变窗口大小这一事件，这也符合拖动到位以后再触发事件，如果一直拖个不停，始终不触发事件这一直觉。

而截流函数是在延迟时间内，绑定到事件上的回调函数能且只能触发一次，这和截流函数不同，即便是在延迟时间内连续触发事件，也不会阻止在延迟时间内有一个回调函数执行。并且截流函数允许我们指定回调函数是在延迟时间开始时还是结束时执行。

鉴于截流函数的上述两个特性，尤其适合优化滚动/滑动事件：

可以限制频率；
不会因为滚动/滑动事件太灵敏（在延迟时间内不断触发）导致注册在事件上的回调函数无法执行；
可以设置在延迟时间开始时触发回调函数，从而避免用户感到操作之后的短暂延时。

这里不介绍防抖动函数和截流函数的实现原理，感兴趣的可以看 Throttling and Debouncing in JavaScript ，下面是实现的代码：

// 防抖动函数，method 回调函数，context 上下文，event 传入的时间，delay 延迟函数
debounce(method, context, event, delay) {
 clearTimeout(method.tId);
 method.tId = setTimeout(() => {
  method.call(context, event);
 }, delay);
},
// 截流函数，method 回调函数，context 上下文，delay 延迟函数，
// immediate 传入 true 表示在 delay 开始时执行回调函数
throttle(method, context, delay, immediate) {
 return function() {
  const args = arguments;
  const later = () => {
   method.tID = null;
   if (!immediate) {
    method.apply(context, args);
   }
  };
  const callNow = immediate && !method.tID;
  clearTimeout(method.tID);
  method.tID = setTimeout(later, delay);
  if (callNow) {
   method.apply(context, args);
  }
 };
},

登入後複製

《JavaScript 高级程序设计 - 第三版》 22.33.3 节中介绍的 throttle 函数和此处定义的不同，高程中定义的 throttle 函数对应此处的 debounce 函数，但网上大多数文章都和高程中的不同，比如 lodash 中定义的 debounce 。

6.2 改造 PC 端滚动事件

通过上述说明，我们已经知道截流函数可以通过限定滚动事件触发频率提升性能，同时，设置在延迟时间开始阶段立即调用滚动事件的回调函数并不会牺牲用户体验。

截流函数上文已经定义好，使用起来就很简单了：

// 设置截流函数
let handleMouseWheel = utils.throttle(this.scrollMouse, this, this.DELAY, true);
// 鼠标滚轮监听，火狐鼠标滚动事件不同其他
if (navigator.userAgent.toLowerCase().indexOf('firefox') === -1) {
 document.addEventListener('mousewheel', handleMouseWheel);
} else {
 document.addEventListener('DOMMouseScroll', handleMouseWheel);
}

登入後複製

上面这部分代码是写在 class 的 init 方法中，所以截流函数的上下文（context）传入的是 this ，表示当前 class 实例。

7）其他

7.1 导航按钮

为了简化 html 结构，导航按钮通过 js 创建。这里的难点在于如何实现点击不同按钮实现对应页面的跳转并更新对应按钮的样式。

解决的思路是：

页面跳转：页面个数和导航按钮的个数一致，所以点击第 i 个按钮也就是跳转到第 i 个页面，而第 i 个页面对应的容器 top 值恰好是 -(i * this.viewHeight)
更改样式：更改样式即先删除所有按钮的选中样式，然后给当前点击的按钮添加选中样式。

// 创建右侧点式导航
createNav() {
 const nav = document.createElement('p');
 nav.className = 'nav';
 this.container.appendChild(nav);
 // 有几页，显示几个点
 for (let i = 0; i < this.pagesNum; i++) {
  nav.innerHTML += &#39;<p class="nav-dot"><span></span></p>';
 }
 const navDots = document.querySelectorAll('.nav-dot');
 this.navDots = Array.prototype.slice.call(navDots);
 // 添加初始样式
 this.navDots[0].classList.add('active');
 // 添加点式导航点击事件
 this.navDots.forEach((el, i) => {
  el.addEventListener('click', event => {
   // 页面跳转
   this.currentPosition = -(i * this.viewHeight);
   this.turnPage(this.currentPosition);
   // 更改样式
   this.navDots.forEach(el => {
    utils.deleteClassName(el, 'active');
   });
   event.target.classList.add('active');
  });
 });
}

登入後複製

7.2 自定义参数

得当的自定义参数可以增加插件的灵活性。

参数通过构造函数传入，并通过 Object.assign() 进行参数合并：

constructor(options) {
 // 默认配置
 const defaultOptions = {
  isShowNav: true,
  delay: 150,
  definePages: () => {},
 };
 // 合并自定义配置
 this.options = Object.assign(defaultOptions, options);
}

登入後複製

7.3 窗口尺寸改变时更新数据

浏览器窗口尺寸改变的时候，需要重新获取可视区、页面元素高度，并重新确定容器当前的 top 值。

同时，为了避免不必要的性能开支，这里使用了防抖动函数。

// window resize 时重新获取位置
getNewPosition() {
 this.viewHeight = document.documentElement.clientHeight;
 this.container.style.height = this.viewHeight + 'px';
 let activeNavIndex;
 this.navDots.forEach((e, i) => {
  if (e.classList.contains('active')) {
   activeNavIndex = i;
  }
 });
 this.currentPosition = -(activeNavIndex * this.viewHeight);
 this.turnPage(this.currentPosition);
}
handleWindowResize(event) {
 // 设置防抖动函数
 utils.debounce(this.getNewPosition, this, event, this.DELAY);
}
// 窗口尺寸变化时重置位置
window.addEventListener('resize', this.handleWindowResize.bind(this));

登入後複製

7.4 兼容性

这里的兼容性主要指两个方面：一是不同浏览器对同一行为定义了不同 API，比如上文提到的获取鼠标滚动信息的 API Firefox 和其他浏览器不一样；第二点就是 ES6 新语法、新 API 的兼容处理。

对于 class、箭头函数这类新语法的转换，通过 babel 就可完成，鉴于本插件代码量很小，都处于可控的状态，并没有引入 babel 提供的 polyfill 方案，因为新 API 只有 Object.assign() 需要做兼容处理，单独写个 polyfill 就好，如下：

// polyfill Object.assign
polyfill() {
 if (typeof Object.assign != 'function') {
  Object.defineProperty(Object, 'assign', {
   value: function assign(target, varArgs) {
    if (target == null) {
     throw new TypeError('Cannot convert undefined or null to object');
    }
    let to = Object(target);
    for (let index = 1; index < arguments.length; index++) {
     let nextSource = arguments[index];
     if (nextSource != null) {
      for (let nextKey in nextSource) {
       if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
        to[nextKey] = nextSource[nextKey];
       }
      }
     }
    }
    return to;
   },
   writable: true,
   configurable: true,
  });
 }
},

登入後複製

引用自： MDN-Object.assign()

因为本插件只兼容到 IE10，所以不打算对事件做兼容处理，毕竟IE9 都支持 addEventListener 了。

7.5 通过惰性载入进一步优化性能

在 5.1 中写的 getWheelDelta 函数每次执行都需要检测是否支持 event.wheelDelta ，实际上，浏览器只需在第一次加载时检测，如果支持，接下来都会支持，再做检测是没必要的。

并且这个检测在页面的生命周期中会执行很多次，这种情况下可以通过惰性载入技巧进行优化，如下：

getWheelDelta(event) {
 if (event.wheelDelta) {
  // 第一次调用之后惰性载入，无需再做检测
  this.getWheelDelta = event => event.wheelDelta;
  // 第一次调用使用
  return event.wheelDelta;
 } else {
  // 兼容火狐
  this.getWheelDelta = event => -event.detail;
  return -event.detail;
 }
},

登入後複製

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1653

CakePHP 教程

1413

Laravel 教程

1306

PHP教程

1251

C# 教程

1224

Related knowledge

如何在iPhone中使Google地圖成為預設地圖 Apr 17, 2024 pm 07:34 PM

iPhone上的預設地圖是Apple專有的地理位置供應商「地圖」。儘管地圖越來越好，但它在美國以外的地區運作不佳。與谷歌地圖相比，它沒有什麼可提供的。在本文中，我們討論了使用Google地圖成為iPhone上的預設地圖的可行性步驟。如何在iPhone中使Google地圖成為預設地圖將Google地圖設定為手機上的預設地圖應用程式比您想像的要容易。請依照以下步驟操作–先決條件步驟–您必須在手機上安裝Gmail。步驟1–開啟AppStore。步驟2–搜尋“Gmail”。步驟3–點選Gmail應用程式旁

升級微信最新版本的步驟（輕鬆掌握微信最新版本的升級方法） Jun 01, 2024 pm 10:24 PM

不斷推出新版本以提供更好的使用體驗，微信作為中國的社交媒體平台之一。升級微信至最新版本是非常重要的，家人和同事的聯繫、為了保持與朋友、及時了解最新動態。 1.了解最新版本的特性與改進了解最新版本的特性與改進非常重要，在升級微信之前。效能改進和錯誤修復，透過查看微信官方網站或應用程式商店中的更新說明、你可以了解新版本所帶來的各種新功能。 2.檢查目前微信版本我們需要檢查目前手機上已安裝的微信版本、在升級微信之前。點擊，打開微信應用“我”然後選擇，菜單“關於”在這裡你可以看到當前微信的版本號，。 3.打開應

此 Apple ID 尚未在 iTunes Store 中使用：修復 Jun 10, 2024 pm 05:42 PM

使用AppleID登入iTunesStore時，可能會在螢幕上拋出此錯誤提示「此AppleID尚未在iTunesStore中使用」。沒有什麼可擔心的錯誤提示，您可以按照這些解決方案集進行修復。修正1–更改送貨地址此提示出現在iTunesStore中的主要原因是您的AppleID個人資料中沒有正確的地址。步驟1–首先，開啟iPhone上的iPhone設定。步驟2–AppleID應位於所有其他設定的頂部。所以，打開它。步驟3–在那裡，打開“付款和運輸”選項。步驟4–使用面容ID驗證您的存取權限。步驟

Shazam應用程式在iPhone中無法運作：修復 Jun 08, 2024 pm 12:36 PM

iPhone上的Shazam應用程式有問題？ Shazam可協助您透過聆聽歌曲找到歌曲。但是，如果Shazam無法正常工作或無法識別歌曲，則必須手動對其進行故障排除。修復Shazam應用程式不會花費很長時間。因此，無需再浪費時間，請按照以下步驟解決Shazam應用程式的問題。修正1–禁用粗體文字功能iPhone上的粗體文字可能是Shazam無法正常運作的原因。步驟1–您只能從iPhone設定執行此操作。所以，打開它。步驟2–接下來，開啟其中的「顯示和亮度」設定。步驟3–如果您發現啟用了“粗體文本

PyCharm新手指南：全面了解外掛程式安裝！ Feb 25, 2024 pm 11:57 PM

PyCharm是一款功能強大且受歡迎的Python整合開發環境（IDE），提供了豐富的功能和工具，讓開發者可以更有效率地編寫程式碼。而PyCharm的插件機制更是其功能擴充的利器，透過安裝不同的插件，可以為PyCharm增加各種功能和客製化的特性。因此，對於PyCharm新手來說，了解並熟練安裝插件是至關重要的。本文將為你詳細介紹PyCharm插件安裝的全

iPhone中缺少時鐘應用程式：如何修復 May 03, 2024 pm 09:19 PM

您的手機中缺少時鐘應用程式嗎？日期和時間仍將顯示在iPhone的狀態列上。但是，如果沒有時鐘應用程序，您將無法使用世界時鐘、碼錶、鬧鐘等多項功能。因此，修復時鐘應用程式的缺失應該是您的待辦事項清單的首位。這些解決方案可以幫助您解決此問題。修復1–放置時鐘應用程式如果您錯誤地從主畫面中刪除了時鐘應用程序，您可以將時鐘應用程式放回原位。步驟1–解鎖iPhone並開始向左側滑動，直到到達「應用程式庫」頁面。步驟2–接下來，在搜尋框中搜尋「時鐘」。步驟3–當您在搜尋結果中看到下方的「時鐘」時，請按住它並

Win11系統管理員權限取得步驟詳解 Mar 08, 2024 pm 09:09 PM

Windows11作為微軟最新推出的作業系統，深受廣大用戶喜愛。在使用Windows11的過程中，有時候我們需要取得系統管理員權限，以便進行一些需要權限的操作。接下來將詳細介紹在Windows11中取得系統管理員權限的步驟。第一步，點擊“開始功能表”，在左下角可以看到Windows圖標，點擊該圖標即可開啟“開始功能表”。第二步，在「開始功能表」中尋找並點擊「

iPhone螢幕截圖不起作用：如何修復 May 03, 2024 pm 09:16 PM

螢幕截圖功能在您的iPhone上不起作用嗎？截圖非常簡單，因為您只需同時按住「提高音量」按鈕和「電源」按鈕即可抓取手機螢幕。但是，還有其他方法可以在設備上捕獲幀。修復1–使用輔助觸控使用輔助觸控功能截取螢幕截圖。步驟1–轉到您的手機設定。步驟2–接下來，點選以開啟「輔助功能」設定。步驟3–開啟「觸摸」設定。步驟4–接下來，開啟「輔助觸控」設定。步驟5–打開手機上的「輔助觸控」。步驟6–打開“自訂頂級選單”以存取它。步驟7–現在，您只需將這些功能中的任何一個連結到螢幕擷取即可。因此，點擊那裡的首

See all articles

ES6實現全螢幕滾動插件步驟詳解

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題