前端基本功：JS(九):scroll家族

作者: 越IT | 来源:发表于2016-11-14 23:37 被阅读97次

scroll家族

Offset 自己的偏移
scroll 滚动的

1/ scrollTop 和 scrollLeft

scrollTop 被卷去的头部
它就是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离

2/怎么得到scrollTop

我们学习一个事件：页面滚动效果

window.onscroll = function() { 页面滚动语句 }

谷歌浏览器和没有声明 DTD <DOCTYPE > ：
document.body.scrollTop;
火狐和其他浏览器
document.documentElement.scrollTop;
ie9+ 和最新浏览器都认识
window.pageXOffset; pageYOffset （scrollTop）

兼容性写法：

1   var scrollTop = window.pageYOffset || document.documentElement.scrollTop
2          || document.body.scrollTop || 0;

3/ JSON

**JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，我们称之为JavaScript对象表示法。使用JSON进行数据传输的优势之一。JSON实际上就是JavaScript **
Json很像我们学过的样式条；

var myjson={k:v,k:v,k:v...} 键值对 key: value color: red;

Json一般就是被当做一个配置单用；
我们的网站，可以注册会员：
姓名：李白
年龄: 500
职业： it
xml

json 对象结构书写：

var json = { key: value， key1:value }
var json = {name: “李白”,age: 15}
使用：
json名.属性 json.name 李白

var json1 = {name :"刘德华",age: 55};
console.log(json1.name);  // 输出名字  刘德华
console.log(json1.age);  // 输出年龄  55

4/判断是不是怪异模式的浏览器

document.compatMode == "CSS1Compat"// 这里是声明了DTD的
//检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>

document.compatMode === "BackCompat"

BackCompat 未声明
CSS1Compat 已经声明

注意大小写

封装自己的scrollTop left

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 3000px;
        }
    </style>
</head>
<body>

</body>
</html>
<script>
    //   var json = {left: 10, right: 10}  变异
    //json.left   json.top
    function scroll() {
        if(window.pageYOffset != null)  //  ie9+ 和其他浏览器
        {
            return {
                left: window.pageXOffset,
                top: window.pageYOffset
            }
        }
        else if(document.compatMode == "CSS1Compat")  // 声明的了 DTD
          // 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>
        {
            return {
                left: document.documentElement.scrollLeft,
                top: document.documentElement.scrollTop
            }
        }
        return { //  剩下的肯定是怪异模式的
            left: document.body.scrollLeft,
            top: document.body.scrollTop
        }
    }
    window.onscroll = function() {
        console.log(scroll().top);
    }
</script>

案例：跟随的广告

跟随的广告.gif

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img{
            position: absolute;
            left:0;
            top:50px;
        }
        #demo{
            width:1000px;
            margin:0 auto;
        }
    </style>
    <script src="my.js" type="text/javascript"></script>
    <script>
        window.onload = function() {
            var pic = $("pic");
            var leader = 0;
            var target = 0;
            var timer = null;  // 定时器
            var top = pic.offsetTop;  // 50
            window.onscroll = function() {
                clearInterval(timer);
                target = scroll().top + top;  // 把最新的 scrolltop 给  target
                timer = setInterval(function() {
                    leader = leader + (target - leader ) / 10;
                    pic.style.top = leader + 'px';
                },30)
            }
        }
    </script>
</head>
<body>
<img src="images/aside.jpg" alt="" id="pic"/>
<div id="demo">
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
   <p>天王盖地虎，小鸡炖蘑菇</p>
</div>
</body>
</html>

其中my.js:

function $(id) {return document.getElementById(id);}
function scroll() {
    if(window.pageYOffset != null)  //  ie9+ 和其他浏览器
    {
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    }
    else if(document.compatMode == "CSS1Compat")  // 声明的了 DTD
    // 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>
    {
        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop
        }
    }
    return { //  剩下的肯定是怪异模式的
        left: document.body.scrollLeft,
        top: document.body.scrollTop
    }
}

scrollTo(x,y)

window.scrollTo(15,15);
方法可把内容滚动到指定的坐标。
格式：
scrollTo(xpos,ypos)
xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos必需。要在窗口文档显示区左上角显示的文档的 y 坐标
因为我们的网页大部分都没有水平滚动条，所以，这个x 不太常用。

案例：火箭返回顶部

小火箭返回顶部.gif

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            width: 2000px;
        }
       .top{
           position: fixed;
           right:50px;
           bottom:100px;
           display: none;
       }

    </style>
    <script src="my.js" type="text/javascript"></script>
    <script>
        window.onload = function() {
            var goTop = $("gotop");
            window.onscroll = function() {
                scroll().top > 0 ? show(goTop) : hide(goTop);  // 如果大于0 就显示 否则隐藏
                leader = scroll().top;  // 把 卷去的头部 给  起始位置
                console.log(scroll().top);
            }
            var leader = 0,target = 0,timer = null;
            // leader 起始位置  target  目标位置
            goTop.onclick = function() {
                target = 0;  //  点击完毕之后 奔向0 去的  不写也可以
                timer = setInterval(function() {
                    leader = leader + (target - leader ) / 10;
                    window.scrollTo(0,leader);  // 去往页面中的某个位置
                    if(leader == target)
                    {
                        clearInterval(timer);
                    }
                },20);

            }

        }
    </script>
</head>
<body>
<div id="gotop" class="top">
    <img src="images/Top.jpg" alt=""/>
</div>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
</body>
</html>

my.js 部分


function $(id) {return document.getElementById(id);}
function show(obj) { obj.style.display = "block";}
function hide(obj) { obj.style.display = "none";}
function scroll() {
    if(window.pageYOffset != null)  //  ie9+ 和其他浏览器
    {
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    }
    else if(document.compatMode == "CSS1Compat")  // 声明的了 DTD
    // 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>
    {
        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop
        }
    }
    return { //  剩下的肯定是怪异模式的
        left: document.body.scrollLeft,
        top: document.body.scrollTop
    }
}

今日案例跟随广告和火箭头回顶部的图片素材获取：

链接：http://pan.baidu.com/s/1jIdQVlG 密码：rlap

网友评论

本文标题：前端基本功：JS(九):scroll家族

本文链接：https://www.haomeiwen.com/subject/zgrkpttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

前端基本功：JS(九):scroll家族

scroll家族

1/ scrollTop 和 scrollLeft

2/怎么得到scrollTop

3/ JSON

4/判断是不是怪异模式的浏览器

封装自己的scrollTop left

案例：跟随的广告

scrollTo(x,y)

案例：火箭返回顶部

今日案例跟随广告和火箭头回顶部的图片素材获取：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

从零开始学前端

JavaScript学习笔记

前端基本功：JS(九):scroll家族

scroll家族

1/ scrollTop 和 scrollLeft

2/怎么得到scrollTop

3/ JSON

4/判断是不是怪异模式的浏览器

封装自己的scrollTop left

案例：跟随的广告

scrollTo(x,y)

案例：火箭返回顶部

今日案例跟随广告和 火箭头回顶部的图片素材获取：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

从零开始学前端

JavaScript学习笔记

今日案例跟随广告和火箭头回顶部的图片素材获取：