[学习交流] 【西安校区】滚动scroll

一、移动滚动条
scroll(x, y)
将滚动条移动到指定位置。该方法接收两个参数，分别是x和y坐标。

<div style="height:1000px">
<button id='btn' style="position:fixed">滚动</button>
</div>
<script>
btn.onclick = function(){
      scroll(0,0); //滚动到指定位置
}
</script>
scrollTo(x, y)
scrollTo方法和scroll方法功能完全相同。

<div style="height:1000px">
<button id='btn' style="position:fixed">滚动</button>
</div>
<script>
btn.onclick = function(){
      scrollTo(0,0); //滚动到指定位置
}
</script>
scrollBy(x, y)
使滚动条移动指定距离。该方法接收两个参数，分别是x和y方向上的偏移量。

<div style="height:1000px">
<button id='btn1' style="position:fixed">向下滚动</button>
<button id='btn2' style="position:fixed;top:40px">向上滚动</button>
</div>
<script>
btn1.onclick = function(){
      scrollBy(0,100);  //每次点击向上滚动100px
}
btn2.onclick = function(){
      scrollBy(0,-100); //每次点击向下滚动100px
}
</script>
封装方法实现自动阅读功能。


<button id="start" style="width:100px;height:100px;
background-color:red;border-radius: 50%;
position:fixed;bottom:300px;right:100px;">开始</button>
<button id="stop" style="width:100px;height:100px;
background-color:yellow;border-radius: 50%;
position:fixed;bottom:100px;right:100px;">停止</button>
<script>
var timer = 0;
start.onclick = function(){
      timer = setInterval(function(){
         window.scrollBy(0, 10);
      },100);
}
stop.onclick = function(){
      clearInterval(timer);
}
</script>
如上代码所示，如果连续点击多次开始按钮，会创建多个定时器，它们的效果会叠加。此时点击停止按钮，只会清除最新的一个定时器，其余不受影响。这是一个bug，修改如下。


<button id="start" style="width:100px;height:100px;
background-color:red;border-radius: 50%;
position:fixed;bottom:300px;right:100px;">开始</button>
<button id="stopd" style="width:100px;height:100px;
background-color:yellow;border-radius: 50%;
position:fixed;bottom:100px;right:100px;">停止</button>
<script>
var timer = 0;
var key = true; //加锁式编程
start.onclick = function(){
      if(key){
         timer = setInterval(function(){
            window.scrollBy(0, 10);
         },100);
         key = false;
      }
}
stopd.onclick = function(){
      clearInterval(timer);
      key = true;
}
</script>
scrollIntoView()
移动滚动条，让当前元素在视口中可见。该方法接收一个布尔类型的参数，传参为true或不传参时，视口顶部会尽可能与当前元素顶部平齐。传参为false时，视口底部会尽可能与当前元素底部平齐。该方法可以在所有html元素上调用，兼容于所有主流浏览器。

<style>
button{
      position:fixed;
      right:0;
      bottom:0;
}
</style>
<div style="height:2000px;">
<div id="div"></div>
<button id="btn">回到顶部</button>
</div>
<script>
btn.onclick = function(){
      div.scrollIntoView();
}
</script>
二、滚动条的移动距离
标准方法
w3c提供了两个标准方法pageXOffset和pageYOffset，分别用来计算滚动条在x轴和y轴上的移动距离。它们在ie8及以下版本的浏览器中不兼容。ie9是一个过度版本，ie9以上全面支持w3c标准，ie9以下不支持w3c标准，ie9支持了一小部分。

window.pageXOffset

计算滚动条在x轴上的移动距离，返回结果是一个数字，单位像素。只读属性。

window.pageYOffset

计算滚动条在y轴上的移动距离，返回结果是一个数字，单位像素。只读属性。

兼容低版本ie
兼容低版本ie浏览器的方法有两组，分别是第一组document.body.scrollLeft/scrollTop和第二组document.documentElement.scrollLeft/scrollTop。它们都用来获取或设置滚动条在x轴/y轴上的移动距离，返回结果是一个数字，单位像素。可读可写。这里兼容性比较混乱，有的ie版本第一组方法可用，有的第二组方法可用。规律是这两组方法只能也肯定会有一组是可用的，另一组不可用的方法返回值一定是0。所以在使用它们时，只需将两组方法相加即可。

var xOffset = document.body.scrollLeft + document.documentElement.scrollLeft;
var yOffset = document.body.scrollTop + document.documentElement.scrollTop;
//实现回到顶部，兼容于所有浏览器
function scrollTop(){
var distance = document.body.scrollTop + document.documentElement.scrollTop
if(distance != 0){
      document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}
封装兼容性方法求滚动条移动距离
function getScrollOffset(){
if(window.pageXOffset){
      return {
         x: window.pageXOffset,
         y: window.pageXOffset
      }
}else{
      return {
         x: document.body.scrollLeft + document.documentElement.scrollLeft,
         y: document.body.scrollTop + document.documentElement.scrollTop
      }
}
}
三、滚动事件
window对象或dom元素都可以设置滚动事件。

<div style="height:1000px">
<div id="div" style="position:fixed;top:10px;"></div>
</div>
<script>
window.onscroll = function(){
      var distance = document.documentElement.scrollTop + document.body.scrollTop;
      div.innerHTML = 'scrollTop:' + distance;
}
</script>
四、操作滚动条回到顶部
五种基本方法
锚点

锚点是一种实现页内跳转的常用方式。利用锚点可以很轻松的实现返回顶部功能。

<style>
a{
      position:fixed;
      right:0;
      bottom:0;
}
</style>
<div style="height:2000px;">
<div id="point"></div>
<a href="#point">回到顶部</a>
</div>
scrollTop

scrollTop属性用于获取滚动条在y轴上的移动距离。将该属性设置为0可以实现返回顶部功能。

<style>
button{
      position:fixed;
      right:0;
      bottom:0;
}
</style>
<div style="height:2000px;">
<button id="btn">回到顶部</button>
</div>
<script>
function scrollTop(){
      var distance = document.body.scrollTop + document.documentElement.scrollTop
      if(distance != 0){
         document.body.scrollTop = document.documentElement.scrollTop = 0;
      }
}
btn.onclick = scrollTop;
</script>
scrollTo()或scroll()

将滚动条移动到指定位置。该方法接收两个参数，分别是x和y坐标。设置scrollTo(0,0)可以实现返回顶部的效果。

<style>
button{
      position:fixed;
      right:0;
      bottom:0;
}
</style>
<div style="height:2000px;">
<button id="btn">回到顶部</button>
</div>
<script>
btn.onclick = function(){
      scrollTo(0,0); //或scroll(0,0);
}
</script>
scrollBy()

使滚动条移动指定距离。该方法接收两个参数，分别是x和y方向上的偏移量。计算滚动条在y轴上的移动距离，将其作为参数，逆向滚动，就可以实现返回顶部的功能。

<style>
button{
      position:fixed;
      right:0;
      bottom:0;
}
</style>
<div style="height:2000px;">
<button id="btn">回到顶部</button>
</div>
<script>
btn.onclick = function(){
      var top = 0;
      if(window.pageYOffset){
         top = window.pageYOffset;
      }else{
         top = document.body.scrollTop + document.documentElement.scrollTop;
      }
      scrollBy(0,-top);
}
</script>
scrollIntoView

移动滚动条，让当前元素在视口中可见。该方法接收一个布尔类型的参数，传参为true或不传参时，视口顶部会尽可能与当前元素顶部平齐。传参为false时，视口底部会尽可能与当前元素底部平齐。该方法可以在所有html元素上调用，兼容于所有主流浏览器。

<style>
button{
      position:fixed;
      right:0;
      bottom:0;
}
</style>
<div style="height:2000px;">
<div id="div"></div>
<button id="btn">回到顶部</button>
</div>
<script>
btn.onclick = function(){
      div.scrollIntoView();
}
</script>
效果增强
美化按钮

ie8及以下版本的浏览器中不兼容。

<style>
.box{
      position:fixed;
      right:10px;
      bottom: 10px;
      height:30px;
      width: 50px;
      text-align:center;
      padding-top:20px;
      background-color: lightblue;
      border-radius: 20%;
      overflow: hidden;
}
.box:hover:before{
      top:50%
}
.box:hover .box-in{
      visibility: hidden;
}
.box:before{
      position: absolute;
      top: -50%;
      left: 50%;
      transform: translate(-50%,-50%);
      content:'回到顶部';
      width: 40px;
      color:peru;
      font-weight:bold;
}
.box-in{
      visibility: visible;
      display:inline-block;
      height:20px;
      width: 20px;
      border: 3px solid black;
      border-color: white transparent transparent white;
      transform:rotate(45deg);
}
</style>
<div style="height:2000px;">
<div id="box" class="box">
      <div class="box-in"></div>
</div>
</div>
添加动画

使用定时器，让scrollTop的值每次减少50，到0则动画完毕。

<script>
(function(){
      if (!window.requestAnimationFrame) {
         window.requestAnimationFrame = function(fn) {
            setTimeout(fn, 16);
         };
      }
      if (!window.cancelAnimationFrame) {
         window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
         };
      }
}());
var timer  = null;
box.onclick = function(){
      cancelAnimationFrame(timer);
      timer = requestAnimationFrame(function fn(){
         var oTop = document.body.scrollTop + document.documentElement.scrollTop;
         if(oTop > 0){
            document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
            timer = requestAnimationFrame(fn);
         }else{
            cancelAnimationFrame(timer);
         }
      });
}
</script>
使用定时器，让scrollTo(x,y)中的y参数每次减少50，直到减少到0，则动画完毕。

<script>
(function(){
      if (!window.requestAnimationFrame) {
         window.requestAnimationFrame = function(fn) {
            setTimeout(fn, 16);
         };
      }
      if (!window.cancelAnimationFrame) {
         window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
         };
      }
}());
var timer  = null;
box.onclick = function(){
      cancelAnimationFrame(timer);
      timer = requestAnimationFrame(function fn(){
         var oTop = document.body.scrollTop + document.documentElement.scrollTop;
         if(oTop > 0){
            scrollTo(0,oTop-50);
            timer = requestAnimationFrame(fn);
         }else{
            cancelAnimationFrame(timer);
         }
      });
}
</script>
使用定时器，将scrollBy(x,y)中的y参数设置为-50。

<script>
(function(){
      if (!window.requestAnimationFrame) {
         window.requestAnimationFrame = function(fn) {
            setTimeout(fn, 16);
         };
      }
      if (!window.cancelAnimationFrame) {
         window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
         };
      }
}());
var timer  = null;
box.onclick = function(){
      cancelAnimationFrame(timer);
      timer = requestAnimationFrame(function fn(){
         var oTop = document.body.scrollTop + document.documentElement.scrollTop;
         if(oTop > 0){
            scrollBy(0,-50);
            timer = requestAnimationFrame(fn);
         }else{
            cancelAnimationFrame(timer);
         }
      });
}
</script>
如上代码存在一个缺陷，当页面内容较多时滚动到顶部需要花费很多时间。可以用时间来控制动画效果，假设回到顶部的动画效果共运动500ms。

<script>
(function(){
      if (!window.requestAnimationFrame) {
         window.requestAnimationFrame = function(fn) {
            setTimeout(fn, 16);
         };
      }
      if (!window.cancelAnimationFrame) {
         window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
         };
      }
}());
var timer  = null;
box.onclick = function(){
      cancelAnimationFrame(timer);
      //获取当前毫秒数
      var startTime = + new Date();
      //获取当前页面的滚动高度
      var b = document.body.scrollTop + document.documentElement.scrollTop;
      var d = 500;
      var c = b;
      timer = requestAnimationFrame(function func(){
         var t = d - Math.max(0,startTime - (+new Date()) + d);
         document.documentElement.scrollTop = document.body.scrollTop = t * (-c) / d + b;
         timer = requestAnimationFrame(func);
         if(t == d){
            cancelAnimationFrame(timer);
         }
      });
}
</script>

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【西安校区】滚动scroll

0 个回复

浏览过的版块