11_JS的scroll家族

知識結(jié)構(gòu)

Html基本結(jié)構(gòu)訪問方法
scroll家族
頁面滾動事件
scrollTop郊丛、scrollLeft
獲取scrollTop以及兼容性寫法獲取
JSON
判斷是不是怪異模式的瀏覽器
封裝自己的scrollTop裂允、scrollLeft
案例
固定導(dǎo)航欄
跟隨的廣告
scrollTo(x,y)
案例
帶動畫的返回頂部
瀏覽器滑動效果

Html基本結(jié)構(gòu)訪問方法

文檔是 document，下面有html body head

document.head
document.body
document.title
沒有 document.html 取而代之的是 document.documentElement;

scroll家族

Offset 自己的偏移
scroll 滾動的

頁面滾動事件

window.onscroll = function() { 頁面滾動語句  }

scrollTop速侈、scrollLeft

scrollTop 被卷去的頭部

它就是當你滑動滾輪瀏覽網(wǎng)頁的時候網(wǎng)頁隱藏在屏幕上方的距離

獲取scrollTop

document.body.scrollTop;
如果頁面包含DTD：<!DOCTYPE >則只有谷歌瀏覽器支持
如果頁面不包含DTD：<!DOCTYPE >薄扁，則谷歌瀏覽器和其他瀏覽器都支持
document.documentElement.scrollTop;
谷歌瀏覽器不支持剪返，火狐和其他瀏覽器支持
window.pageYOffset（scrollTop）、window.pageXOffset;
IE9+以及其他最新的瀏覽器都支持

兼容性寫法：

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

JSON

JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式邓梅，我們稱之為JavaScript對象表示法脱盲。使用JSON進行數(shù)據(jù)傳輸?shù)膬?yōu)勢之一。JSON實際上就是JavaScript
　　Json很像我們學(xué)過的樣式條日缨；
var myjson={k:v,k:v,k:v...} 鍵值對 key: value color: red;

json對象

var json = { key: value钱反， key1:value }

var json1 = {name :"劉德華",age: 55};
console.log(json1.name);  // 輸出名字  劉德華
console.log(json1.age);  // 輸出年齡  55

判斷是不是怪異模式的瀏覽器

檢測是不是怪異模式的瀏覽器 -- 就是檢測有沒有聲明<!DOCTYPE html>

document.compatMode == "CSS1Compat"
document.compatMode === "BackCompat"

BackCompat 未聲明
CSS1Compat 已經(jīng)聲明
注意大小寫

封裝自己的scrollTop、scrollLeft

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        p{
            display: block;
            width: 5000px;
            height: 5000px;
            background: #cccccc;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            function scroll(){
                //此處不能使用if(window.pageXOffset)匣距，
                //因為如果瀏覽器支持window.pageXOffset面哥，剛開始window.pageXOffset=0，也沒有進入這個if
                if(window.pageXOffset != null){
                    return {
                        left:window.pageXOffset,
                        top:window.pageYOffset
                    }
                }
                // 檢測是不是怪異模式的瀏覽器 -- 就是沒有 聲明<!DOCTYPE html>
                //CSS1Compat表示已經(jīng)聲明<!DOCTYPE html>毅待，不是怪異模式
                else if(document.compatMode === "CSS1Compat"){
                    return {
                        left:document.documentElement.scrollLeft,
                        top:document.documentElement.scrollTop
                    }
                }
                return {
                    left:document.body.scrollLeft,
                    top:document.body.scrollTop
                }
            }
            window.onscroll = function () {
                var obj = scroll();
                console.log(obj.left+":"+obj.top);
            }
        }
    </script>
</head>
<body>
    <p>123</p>

</body>
</html>

例：固定導(dǎo)航欄

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;

        }
        img{
            display: block;
        }
        .top , .nav{
            width: 1423px;
            margin: 0 auto;
        }
        .main{
            width: 1001px;
            margin: 0 auto;
        }
        .fixed{
            position: fixed;
            top: 0;
            left: 50%;
            margin-left: -711px;
        }
    </style>
    <script type="text/javascript">
        function $(id){return document.getElementById(id);}
        function scroll(){
            //此處不能使用if(window.pageXOffset)尚卫，
            //因為如果瀏覽器支持window.pageXOffset，剛開始window.pageXOffset=0尸红，也沒有進入這個if
            if(window.pageXOffset != null){
                return {
                    left:window.pageXOffset,
                    top:window.pageYOffset
                }
            }
            // 檢測是不是怪異模式的瀏覽器 -- 就是沒有 聲明<!DOCTYPE html>
            //CSS1Compat表示已經(jīng)聲明<!DOCTYPE html>吱涉，不是怪異模式
            else if(document.compatMode === "CSS1Compat"){
                return {
                    left:document.documentElement.scrollLeft,
                    top:document.documentElement.scrollTop
                }
            }
            return {
                left:document.body.scrollLeft,
                top:document.body.scrollTop
            }
        }
        window.onload = function () {
            var navTop = $("nav").offsetTop;
            console.log(navTop);
            window.onscroll = function () {
                var scrollTop = scroll().top;
                if(scrollTop<navTop){
                    $("nav").className = "nav";
                }else{
                    $("nav").className = "nav fixed";
                }
            }
        }
    </script>
</head>
<body>
    <div class="top">
        ![](images/top.png)
    </div>
    <div class="nav" id="nav">
        ![](images/nav.png)
    </div>
    <div class="main">
        ![](images/main.png)
    </div>
</body>
</html>

例：跟隨的廣告

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        img{
            position: absolute;
            left: 0;
            top: 50px;
        }
        p{
            display: block;
            width: 100%;
            height: 600px;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        function $(id){return document.getElementById(id);}
        function scroll(){
            //此處不能使用if(window.pageXOffset)，
            //因為如果瀏覽器支持window.pageXOffset驶乾，剛開始window.pageXOffset=0邑飒，也沒有進入這個if
            if(window.pageXOffset != null){
                return {
                    left:window.pageXOffset,
                    top:window.pageYOffset
                }
            }
            // 檢測是不是怪異模式的瀏覽器 -- 就是沒有 聲明<!DOCTYPE html>
            //CSS1Compat表示已經(jīng)聲明<!DOCTYPE html>，不是怪異模式
            else if(document.compatMode === "CSS1Compat"){
                return {
                    left:document.documentElement.scrollLeft,
                    top:document.documentElement.scrollTop
                }
            }
            return {
                left:document.body.scrollLeft,
                top:document.body.scrollTop
            }
        }
        window.onload = function () {
            var pic = $("pic");
            var top = pic.offsetTop;
            var timer = null;
            var leader= 0,target=0;
            window.onscroll = function () {
                target = scroll().top+ top;
                if(timer) clearInterval(timer);
                timer = setInterval(function () {
                    leader = leader+(target - leader)/10;
                    pic.style.top = leader+"px";
                },20);
            }
        }
    </script>
</head>
<body>
    ![](images/aside.jpg)
    <div class="con">
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
    </div>
</body>
</html>

scrollTo(x,y)

window.scrollTo(15,15);
方法可把內(nèi)容滾動到指定的坐標级乐。
格式：

scrollTo(xpos,ypos)

xpos必需疙咸。要在窗口文檔顯示區(qū)左上角顯示的文檔的 x 坐標。
ypos必需风科。要在窗口文檔顯示區(qū)左上角顯示的文檔的 y 坐標
因為我們的網(wǎng)頁大部分都沒有水平滾動條撒轮，所以乞旦，這個x 不太常用。

例：帶動畫的返回頂部

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        img{
            position: fixed;
            right: 50px;
            bottom: 50px;
            display: none;
        }
        p{
            display: block;
            width: 100%;
            height: 600px;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        //封裝
        function $(id){return document.getElementById(id);}
        function show(obj){obj.style.display = "block";}
        function hide(obj){obj.style.display = "none";}
        function scroll(){
            //此處不能使用if(window.pageXOffset)题山，
            //因為如果瀏覽器支持window.pageXOffset兰粉，剛開始window.pageXOffset=0，也沒有進入這個if
            if(window.pageXOffset != null){
                return {
                    left:window.pageXOffset,
                    top:window.pageYOffset
                }
            }
            // 檢測是不是怪異模式的瀏覽器 -- 就是沒有 聲明<!DOCTYPE html>
            //CSS1Compat表示已經(jīng)聲明<!DOCTYPE html>顶瞳，不是怪異模式
            else if(document.compatMode === "CSS1Compat"){
                return {
                    left:document.documentElement.scrollLeft,
                    top:document.documentElement.scrollTop
                }
            }
            return {
                left:document.body.scrollLeft,
                top:document.body.scrollTop
            }
        }
        window.onload = function () {
            var back = $("back_btn");
            var leader = 0,target = 0,timer = null;
            window.onscroll = function () {
                scroll().top>0?show(back):hide(back);
                leader = scroll().top;
            }
            back.onclick = function () {
                if(timer) clearInterval(timer);
                target = 0;
                timer = setInterval(function () {
                    leader = leader+(target - leader)/10;
                    window.scrollTo(0 ,leader);
                    if(leader - target<0.005) clearInterval(timer);
                },20);
            }
        }
    </script>
</head>
<body>
    ![](images/Top.jpg)
    <div class="con">
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
    </div>
</body>
</html>

例：瀏覽器滑動效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>屏幕滾動</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul,ol,li{
            list-style: none;

        }
        html,body{
            width: 100%;
            height: 100%;
        }
        ul{
            width: 100%;
            height: 100%;
        }
        ul li{
            width: 100%;
            height: 100%;

        }
        ol{
            position: fixed;
            left: 78px;
            top: 18px;
        }
        ol li{
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            border: 1px solid #fff;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        function $(id){return document.getElementById(id);}
        function scroll(){
            //此處不能使用if(window.pageXOffset)玖姑，
            //因為如果瀏覽器支持window.pageXOffset，剛開始window.pageXOffset=0慨菱，也沒有進入這個if
            if(window.pageXOffset != null){
                return {
                    left:window.pageXOffset,
                    top:window.pageYOffset
                }
            }
            // 檢測是不是怪異模式的瀏覽器 -- 就是沒有 聲明<!DOCTYPE html>
            //CSS1Compat表示已經(jīng)聲明<!DOCTYPE html>焰络，不是怪異模式
            else if(document.compatMode === "CSS1Compat"){
                return {
                    left:document.documentElement.scrollLeft,
                    top:document.documentElement.scrollTop
                }
            }
            return {
                left:document.body.scrollLeft,
                top:document.body.scrollTop
            }
        }
        window.onload = function () {
            var ulis = $("ul").children;
            var olis = $("ol").children;
            var colors = ["pink","red","blue","yellow","purple"];

            var leader= 0,target= 0,timer =null;
            window.onscroll = function () {//鼠標滾動，會改變起點
                leader = scroll().top;
            }
            for(var i = 0;i<olis.length ;i++){
                var oli = olis[i];
                oli.index = i;
                oli.style.backgroundColor = colors[i];
                ulis[i].style.backgroundColor = colors[i];
                oli.onclick = function () {
                    target = ulis[this.index].offsetTop;
                    if(timer) clearInterval(timer);
                    timer = setInterval(function () {
                        leader = leader+(target - leader)/10;
                        window.scrollTo(0,leader);
                        var diff = leader - target;
//                        console.dir(diff);
                        if(diff<0.005&&diff>-0.005){
                            clearInterval(timer);
                        }
                    },20);
                }
            }

        }
    </script>
</head>
<body>
<ul id="ul">
    <li>首頁</li>
    <li>動態(tài)</li>
    <li>朋友</li>
    <li>設(shè)置</li>
    <li>退出</li>
</ul>
<ol id="ol">
    <li>首頁</li>
    <li>動態(tài)</li>
    <li>朋友</li>
    <li>設(shè)置</li>
    <li>退出</li>
</ol>
</body>
</html>

最后編輯于：2017.12.08 02:46:58

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末符喝，一起剝皮案震驚了整個濱河市闪彼，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌协饲，老刑警劉巖畏腕，帶你破解...
沈念sama閱讀 212,816評論 6贊 492
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異茉稠，居然都是意外死亡描馅，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,729評論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門而线，熙熙樓的掌柜王于貴愁眉苦臉地迎上來流昏，“玉大人，你說我怎么就攤上這事吞获。” “怎么了谚鄙？”我有些...
開封第一講書人閱讀 158,300評論 0贊 348
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵各拷，是天一觀的道長。經(jīng)常有香客問我闷营，道長烤黍，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 56,780評論 1贊 285
?港島之戀（遺憾婚禮）
正文為了忘掉前任傻盟，我火速辦了婚禮速蕊，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘娘赴。我一直安慰自己规哲，他們只是感情好，可當我...
茶點故事閱讀 65,890評論 6贊 385
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布诽表。她就那樣靜靜地躺著唉锌，像睡著了一般隅肥。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上袄简，一...
開封第一講書人閱讀 50,084評論 1贊 291
城市分裂傳說
那天腥放，我揣著相機與錄音，去河邊找鬼绿语。笑死秃症，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的吕粹。我是一名探鬼主播种柑，決...
沈念sama閱讀 39,151評論 3贊 410
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼昂芜！你這毒婦竟也來了莹规？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 37,912評論 0贊 268
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤泌神，失蹤者是張志新（化名）和其女友劉穎良漱，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體欢际，經(jīng)...
沈念sama閱讀 44,355評論 1贊 303
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡母市，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,666評論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了损趋。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片患久。...
茶點故事閱讀 38,809評論 1贊 341
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖浑槽，靈堂內(nèi)的尸體忽然破棺而出蒋失，到底是詐尸還是另有隱情，我是刑警寧澤桐玻，帶...
沈念sama閱讀 34,504評論 4贊 334
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布篙挽，位于F島的核電站，受9級特大地震影響镊靴，放射性物質(zhì)發(fā)生泄漏铣卡。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 40,150評論 3贊 317
男人毒藥：我在死后第九天來索命
文/蒙蒙一偏竟、第九天我趴在偏房一處隱蔽的房頂上張望煮落。院中可真熱鬧，春花似錦踊谋、人聲如沸蝉仇。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,882評論 0贊 21
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽量淌。三九已至骗村，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間呀枢，已是汗流浹背胚股。一陣腳步聲響...
開封第一講書人閱讀 32,121評論 1贊 267
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留裙秋，地道東北人琅拌。一個月前我還...
沈念sama閱讀 46,628評論 2贊 362
代替公主和親
正文我出身青樓，卻偏偏與公主長得像摘刑，于是被迫代替她去往敵國和親进宝。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 43,724評論 2贊 351