scroll家族

最新推荐文章于 2021-12-08 22:26:38 发布
最新推荐文章于 2021-12-08 22:26:38 发布
阅读量83 收藏
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45722135/article/details/108263883
版权

1：概念

网页正文文宽：document.body.scrollWidth.

网页正文全高：document.body.scrollHeight.

网页被卷去的高： document.body.scrollTop.

网页被卷去的左：'document.body.scrollLeft.

 

一般在开发中使用最多的是scrollTop.

补充：严格模式和怪异模式

使用：document.compatMode.

值为BackCompat，则是怪异模式；值为Css1Compat，则为严格模式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            height: 3000px;
        }
    </style>
</head>
<body>
<script>
   // console.log(document.body.scrollTop);
    window.onscroll=function (ev) {
        //console.log(document.body.scrollTop);
       //console.log(document.documentElement.scrollTop); //兼容
        console.log(document.compatMode);
        //console.log(window.pageYOffset); //支持所有版本
    }
</script>

</body>
</html>

 

 

案例：

《1 中部导航吸顶案例：

 

本案例就是实现当箭头滚动时，红色横线部分静止不动，吸住不动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0;padding: 0;list-style: none;border: none}
        img{vertical-align: top;width: 100%}
        section{width: 70%;margin: 0 auto}
        .nav{
            position:fixed;
            left: 0;
            top: 0;
            width: 100%;
        }
    </style>
</head>
<body>
<header id="head">
    <img src="images/top.png" alt="">
</header>
<nav id="nav">
    <img src="images/nav.png" alt="">
</nav>
<section >
    <img src="images/body01.png" alt="">
    <img src="images/body02.png" alt="">
</section>
<script src="js/MyFunc.js"></script>
<script>
    window.onload=function (){
        //1求出头部高度
        var navTopHeight=$('nav').offsetTop;
        //2监听页面滚动
        window.onscroll=function (ev) {
            var scrollTopHeight=scroll().top;
            console.log(scrollTopHeight);
            //2.1判断
            if (scrollTopHeight>=navTopHeight){
                $('nav').className='nav';
            }else {
                $('nav').className='';
            }
        }
    }
</script>
</body>
</html>

《2 侧边横幅特效案例

我们滑动页面，在页面旁边总会有小广告，但这广告是随着页面滚动到结束滚动，侧边横幅都会停止在原本的位置。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0;padding: 0;list-style: none;border: none;}
        #aside{width: 150px;position: absolute;left: 0;top: 150px;}
        #aside img{width: 100%;}
        p{height: 50px;font-size: 20px;text-align: center;}
    </style>
</head>
<body>
<div id="aside">
    <img src="images/float.jpg" alt="">
</div>
<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>
    <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>

<script src="js/MyFunc.js"></script>
<script>
    window.onload=function () {
        //1获取头部高度
        var offsetTOP=$('aside').offsetTop;
        //2监听文档滚动
        var begin=0,end=0,timeID=null;
        window.onscroll=function (ev) {
            //2.0清除定时器
            clearInterval(timeID);
            //2.1获取滚动产生的高度
            var scrollTopHeight=scroll().top;
            end=offsetTOP + scrollTopHeight;

            //2.2缓动动画
            timeID=setInterval(function (){
                begin +=(end - begin)*0.2;
                $('aside').style.top=begin+'px';
                console.log(begin, end);

                if (Math.round(begin)===end){
                    clearInterval(timeID);
                }

            },20)
        }


    }
</script>

</body>
</html>

 《3返回顶部案例：

常见在电商网站上的商品页面浏览，我们会经常浏览到顶部一下许多，但当要返回顶部时，都会选择返回顶部的操作键。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0;padding: 0;list-style: none;border: none}
        body{background-color: #cccccc;}
        p{margin-bottom: 20px;text-align: center;}
        #top{
            width: 43px;
            height: 43px;
            background: url("images/top.png")no-repeat;
            background-size: 100% 100%;
            position: fixed;
            right: 10px;
            bottom: 30px;
            display: none;
        }
    </style>
</head>
<body>
<span id="top"></span>
<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>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>
    <p>今天天气很好!</p>

</div>

<script src="js/MyFunc.js"></script>
<script>
    window.onload=function () {
        //0变量
        var scrollTopH=0,begin=0,end=0,timeID=null;
       //1监听页面滚动
        window.onscroll=function (ev) {
            //1.1获取滚动高度
            scrollTopH=scroll().top;
            //1.2标签显示和隐藏
            scrollTopH >0 ?show($('top')) : hide($('top'));
            begin=scrollTopH
            //2 监听点击
            $('top').onclick=function (){
                //2.1 清除定时器
                clearInterval(timeID);

                //2.2开启缓动动画
                timeID=setInterval(function () {
                    begin += (end-begin)*0.2
                    window.scrollTo(0,begin)

                    console.log(begin, end);

                    //2.3 清除定时器
                    if (Math.round(begin)===end){
                        clearInterval(timeID)
                    }


                },20);
            }

        }














    }
</script>

</body>
</html>

 

 

 

 

 

junlingshiwo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
scroll 家族
ojb98K的博客
06-27 99
scroll兼容问题 获取页面上下位移，和左右位移 ie9和最新的浏览器 window.pageYOffset; scrollLeft window.pageYOffset; scrollTop Firfox浏览器和其他浏览器 document.documentElement.scrollTop document.documentElement.scrollLeft Chrome浏览器和没有声明 DTD document.body.scrollTop document.body.scrol
6、scroll家族
weixin_45699925的博客
11-11 194
1、scroll家族 1、兼容性问题 正常使用pageOffset获取滚动位置 //兼容性问题 scrollTop scrollLeft 获取位置 function getScroll() { var scroll = { x: window.pageXOffset || document.body.scrollLeft || document.documentElemen...
scroll家族简介
work33的博客
12-08 501
scroll家族 属性/方法 解释 element.scrollHeight 返回元素的整体高度。 element.scrollWidth 返回元素的整体宽度。 element.scrollLeft 返回元素左边缘与视图之间的距离。单位px（包括padding） element.scrollTop 返回元素上边缘与视图之间的距离。 单位px（包括padding） 属性/方法 解释 window.scrollBy() 使窗口滚动到指定位置 window.sc
JavaScript - WebAPI - 滚动家族 - scroll家族
Henry_ID的博客
08-14 157
1.0-offset家族(元素自身大小) offsetWidth：宽度，border（左右） + padding（左右）+content：getComputedStyle(元素)[width\border\padding] offsetHeight：高度（与宽度逻辑一样） offsetLeft：自己的border外部 到 定位父级 border的内部 offsetTop：与offsetLeft逻辑一样 offsetParent：定位父级 1.1-scroll家族（元素内容大小） 1.offset家族：
详解offset家族 scroll家族 client家族
cai_niao5623的博客
09-26 137
一、offset家族 1、简介 offsetWidth =width+padding+border //获取元素的宽度 offsetHeight =Height+padding+border //获取元素的高度 offsetLeft： //返回距离上级盒子（带有定位）左边的距离, ...
scroll家族属性
weixin_30691871的博客
09-16 89
上一篇主要分析了一下offset家族属性，本篇文章则主要是来分析一下scroll家族属性。 首先，scroll家族包括4个属性： 网页正文宽度：document.body.scrollWidth; 网页正文高度：document.body.scrollHeight; 网页被卷去的高：document.body.scrollTop; 网页被卷去的左：docu...
js进阶之scroll家族
weixin_45170547的博客
06-14 129
偏重于滚动 ie9+ 和 最新浏览器：使用：window.pageXOffse和window.pageYOffset； 也可以使用：document.documentElement.scrollTop和document.documentElement.scrollLeft或者是document.body.scrollTop和document.body.scrollLef (但是存在很大的兼容...
JavaScript四大家族之scroll家族
weixin_30266829的博客
08-10 57
javascript 元素对象拥有scroll家族主要属性： ScrollTop:　　（被滚动条卷去的头部高度） ScrollLeft:　　（被滚动条卷曲的左侧距离） ScrollWidth　　（内容实际宽度：width+padding+超出盒子的宽度） ScorllHeight　　（内容实际高度：height+padding+超出盒子的高度） Scroll...
client家族 scroll家族 offset家族
不会写代码的前端
10-24 134
client家族（可视区域）：clientWidth=content+padding （不包括border）其它一样 clientLeft=border-left-width (边框的宽度) 其它一样 offset家族：offsetWidth=padding+content+border 其它一样 offsetLeft=margin-left (当前元素距离有定位的父盒子左边的距离) scrol...
javascript必修课_offset,client,scroll家族
06-21
本课将带你学习前端开发中最重要的技术JavaScript,它是网页与用户进行交互的基石。...最后我们还会学习Jquery框架，以提高你的前端开发效率。学完本课后，你将能独立做出与用户有复杂交互(表单、动画、视频等)的网站...
实现思路1
08-08
实现思路：使用 Scroll 家族 ScrollTop / scrollLeft 实现滚动效果。ScrollTop 是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方/左边的距离。 3. 固定导航栏： 实现思路：当 scrollTop 值大于等于导航栏的 ...
JS实现吸顶特效
01-19
1.scroll家族和offset家族的结合运用 2.当nav的offsetTop大于屏幕卷去高度的时候，进行吸顶 3.添加一个固定类，如果满足条件，为nav加类名 运行效果 滚动页面时，保证导航栏吸顶 代码 <!DOCTYPE html> <...
scroller
03-29
CSS的`scroll-snap`属性家族可以用来创建平滑的滚动体验，让用户在滚动到特定点时页面自动对齐。 7. **JavaScript和jQuery插件**： 对于不支持CSS3滚动条自定义的浏览器，可以借助JavaScript库如Perfect ...
JS三大家族
weixin_45722135的博客
09-02 972
js中有三大家族，分别是offSet家族、scroll家族、client家族。 一：offset家族：自己的，用于获取元素尺寸。 《1 offseWidth和offsetHeight：获取对象自身的宽度和高度，包括内容，边框，边距和内边距。 即：offsetWidth=width+border+padding； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt.
花瓣网项目
weixin_45722135的博客
09-25 892
今天所说的就是js中我所学的项目： 一个花瓣网网页，将所学的js知识都运用在里面， 、 如上就是所做的效果图，它总共就这些板块来搭建此页面， 将其样式都一笔带过。 ...
js特效------实例
weixin_45722135的博客
08-25 790
《1 js特效---图标切换 我们要建这样的页面效果，就是在几张照片中切换不停，我们所需要用js来搭建切换效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width: 2000px; .
js特效----实例
weixin_45722135的博客
08-26 454
一：百度换肤 如图就是需要将上边的小图换成下边大图。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin: 0;padding: 0;list-style: none;vertical-align: top} b
JS特效
weixin_45722135的博客
08-24 333
一：DOM 《1文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口。 《2 DOM又称文档树模型。 《3 DOM 常用操作：获取文档元素；对文档元素经行增删改查操作；事件操作。 《4 window和document两者， document可以帮助我们拿到页面里面任何东西，比如它的常用属性： console.log(document===window.document); console.log(document); // console.log(doc...
iframe scroll
最新发布
05-12
当被嵌入的文档的内容超出IFrame的显示范围时，就会出现滚动条，这就是IFrame Scroll的话题。IFrame Scroll的主要目的是使用户能够浏览和查看被嵌入文档的所有内容。 IFrame Scroll可以分为两类：水平滚动和垂直...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值