JS简易整页滚动

治电小白菜

发布于 2020-08-25 15:33:55

15.5K0

发布于 2020-08-25 15:33:55

文章被收录于专栏：技术综合技术综合

fullPage超简易版本

1.知识点

JS 滚动监听事件
JS 移动端touch监听事件
函数节流
DOM操作

2.示例GIF

示例GIF

3.代码分析

1.CSS

html, body设置 overflow 为 hidden, 让视图中只包括一个分页;设置滑动分页的长宽都是 100%; 外部容器设置 transition 过渡效果, 并设置为相对定位, 滚动是修改外部容器的 Top 值, 实现滚动效果.

html,
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.page-container {
  position: relative;
  top: 0;
  transition: all 1000ms ease;
  touch-action: none;
}
.page-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
}

2.HTML

初始三个分页

<div class="page-container">
  <div class="page-item">1</div>
  <div class="page-item">2</div>
  <div class="page-item">3</div>
</div>

3.JavaScript

1.初始化值容器高度设置为窗口高度

var container = document.querySelector('.page-container')
// 获取根元素高度, 页面可视高度
var viewHeight = document.documentElement.clientHeight
// 获取滚动的页数
var pageNum = document.querySelectorAll('.page-item').length
// 初始化当前位置, 距离原始顶部距离
var currentPosition = 0
// 设置页面高度
container.style.height = viewHeight + 'px'

2.初始化滚动事件向下滚动时, 当 currentPosition 比 -整体分页高度 大的时候(绝对值相比小的时候), 向下滚动;向上滚动时, 当 currentPosition 大于 0 的时候, 向上滚动.

// 向下滚动页面
function goDown () {
  if (currentPosition > - viewHeight * (pageNum - 1)) {
    currentPosition = currentPosition - viewHeight
    container.style.top = currentPosition + 'px'
  }
}

// 向上滚动页面
function goUp () {
  if (currentPosition < 0) {
    currentPosition = currentPosition + viewHeight
    container.style.top = currentPosition + 'px'
  }
}

3.节流函数即在规定时间内只会触发一次指定方法, 用于滚动时防止多次触发

function throttle (fn, delay) {
  var baseTime = 0
  return function () {
    var currentTime = Date.now()
    if (baseTime + delay < currentTime) {
      fn.apply(this, arguments)
      baseTime = currentTime
    }
  }
}

4.监听鼠标滚动滚动事件firefox与其他浏览器的事件不同, 所以需要进行判断. deltaY大于0的时候, 想下滚动; 反之, 向上滚动.

var handlerWheel = throttle(scrollMove, 1000)
// https://developer.mozilla.org/en-US/docs/Web/API/Element/mousewheel_event#The_detail_property
// firefox的页面滚动事件其他浏览器不一样
if (navigator.userAgent.toLowerCase().indexOf('firefox') === -1) {
  document.addEventListener('mousewheel', handlerWheel)
} else {
  document.addEventListener('DOMMouseScroll', handlerWheel)
}
function scrollMove (e) {
  if (e.deltaY > 0) {
    goDown()
  } else {
    goUp()
  }
}

5.监听移动端touch操作当 touch 的最终位置大于起始位置时, 则页面向上滚动; 反之, 向下滚动.

var touchStartY = 0
document.addEventListener('touchstart', event => {
  touchStartY = event.touches[0].pageY
})
var handleTouchEnd = throttle(touchEnd, 500)
document.addEventListener('touchend', handleTouchEnd)
function touchEnd (e) {
  var touchEndY = e.changedTouches[0].pageY
  if (touchEndY - touchStartY < 0) { // 向上滑动, 页面向下滚动
    goDown()
  } else {
    goUp()
  }
}

4.参考资料

5.整体代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
    .page-container {
      position: relative;
      top: 0;
      transition: all 1000ms ease;
      touch-action: none;
    }
    .page-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <div class="page-container">
    <div class="page-item">1</div>
    <div class="page-item">2</div>
    <div class="page-item">3</div>
  </div>
  <script>
    var container = document.querySelector('.page-container')
    // 获取浏览器视窗高度
    var viewHeight = document.documentElement.clientHeight
    // 获取滚动的页数
    var pageNum = document.querySelectorAll('.page-item').length
    // 初始化当前位置, 距离原始顶部距离
    var currentPosition = 0
    // 设置页面高度
    container.style.height = viewHeight + 'px'

    // 向下滚动页面
    function goDown () {
      if (currentPosition > - viewHeight * (pageNum - 1)) {
        currentPosition = currentPosition - viewHeight
        container.style.top = currentPosition + 'px'
      }
    }

    // 向上滚动页面
    function goUp () {
      if (currentPosition < 0) {
        currentPosition = currentPosition + viewHeight
        container.style.top = currentPosition + 'px'
      }
    }
  </script>
  <script>
    // 节流函数
    function throttle (fn, delay) {
      let baseTime = 0
      return function () {
        const currentTime = Date.now()
        if (baseTime + delay < currentTime) {
          fn.apply(this, arguments)
          baseTime = currentTime
        }
      }
    }
  </script>
  <script>
    // 初始鼠标滚动
    var handlerWheel = throttle(scrollMove, 1000)
    // https://developer.mozilla.org/en-US/docs/Web/API/Element/mousewheel_event#The_detail_property
    // firefox的页面滚动事件其他浏览器不一样
    if (navigator.userAgent.toLowerCase().indexOf('firefox') === -1) {
      document.addEventListener('mousewheel', handlerWheel)
    } else {
      document.addEventListener('DOMMouseScroll', handlerWheel)
    }
    function scrollMove (e) {
      if (e.deltaY > 0) {
        goDown()
      } else {
        goUp()
      }
    }
  </script>
  <script>
    // 处理移动端滑动
    var touchStartY = 0
    document.addEventListener('touchstart', event => {
      touchStartY = event.touches[0].pageY
    })
    var handleTouchEnd = throttle(touchEnd, 500)
    document.addEventListener('touchend', handleTouchEnd)
    function touchEnd (e) {
      var touchEndY = e.changedTouches[0].pageY
      if (touchEndY - touchStartY < 0) { // 向上滑动, 页面向下滚动
        goDown()
      } else {
        goUp()
      }
    }
  </script>

</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

api