[css] 第48天 你知道全屏滚动的原理是什么吗？它用到了CSS的哪些属性？

[haizhilin2013]

第48天 你知道全屏滚动的原理是什么吗？它用到了CSS的哪些属性？

[xiangshuo1992]

全屏滚动和轮播图类似，都是通过改变元素位置或者显示与隐藏来实现，配合JS的一些交互距离判断，实现类似原生滚动捕获的效果。这里全屏的话就需要将宽高都设置为窗口的大小，可以通过百分百实现。
关键CSS属性是父容器 overflow: hidden; 。
实现全屏滚动还可以简单的通过插件来实现，比如fullpage，很多大公司的页面都是用这个实现的，比如小米一些产品的官网。

[git710]

fullpage +1

[dugthou]

css的overflow:hidden，配合transition : all 10s ease

[klren0312]

全屏滚动

1.知识点

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

2.示例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) {
  let baseTime = 0
  return function () {
    const 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.参考资料

• https://developer.mozilla.org/zh-CN/docs/Web/API/Document/documentElement
• https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight
• https://developer.mozilla.org/en-US/docs/Web/API/Element/mousewheel_event#The_detail_property
• https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

[Lionad-Morotar]

我的博客首页是用的是 a标签锚点+CSS Scroll Behavior 做的滚动 www.lionad.art

[zxcdsaqwe123]

固定高度，overflow：scroll