原生JS实现滚动条使用说明_滚动指南教程

求滚动条的高度可视内容区的高度 / 内容区的实际高度 = 滚动条的高度 / 滑道的高度求内容区top的值内容区距离顶部的距离 / (内容区的实际高度 – 可视内容区域的高度 ) = 滚动条距离顶部的距离 / ( 滑道的高度 – 滚动条的高度)使用onmousewheel做好兼容处理document.onmousewheel = function (e){//

原生JS实现滚动条使用说明

求滚动条的高度

可视内容区的高度 / 内容区的实际高度 = 滚动条的高度 / 滑道的高度

原生JS实现滚动条使用说明_滚动指南教程

求内容区top的值

内容区距离顶部的距离 / (内容区的实际高度 – 可视内容区域的高度 ) = 滚动条距离顶部的距离 / ( 滑道的高度 – 滚动条的高度)

使用onmousewheel做好兼容处理

document.onmousewheel = function (e){
    //    e.wheelDelta < 0 //(-120)  向下
    //    e.wheelDelta > 0 //(120)  向上
    }
//兼容  Firefox 
document.addEventListener('DOMMouseScroll',function (e) {
        // e.detail > 0  //(3)  滑轮向下滚动
        // e.detail < 0  //(-3)  滑轮向上滚动
    },false)

滚动条的运动方向跟内容区的运动方向相反

举个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滚动条</title>
    <style>
    *{
        padding: 0;
        margin: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    .wrapper{
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);
        width: 800px;
        height: 700px;
        border: 1px solid #000;
    }
    .view_box{
        position: absolute;
        left: 100px;
        top:50%;
        transform: translateY(-50%);
        width:600px;
        height: 500px;
        background-color: rgba(25, 25, 25,.7);
        overflow: hidden;
    }
    .content{
        position: absolute;
        top: 0;
        width: 100%;
        background-color: #abcdef;
        transition: all 0.016s linear;

    }
    .content div{
        height: 100px;
        background-color: #f40;
    }
    .bar_box{
        position: absolute;
        right: 90px;
        top:50%;
        transform: translateY(-50%);
        height: 500px;
        width: 4px;
        border-radius: 2px;
        background-color: rgba(25, 25, 25,.7);
        overflow: hidden;
    }
    .bar{
        position: absolute;
        top:0;
        height: 20px;
        width: 100%;
        border-radius:2px; 
        background-color: rgb(197, 179, 179);
        transition: all 0.016s linear;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="view_box">
            <div class="content">
               <div>这是内容</div>
               <div>这是内容</div>
               <div>这是内容</div>
               <div>这是内容</div>
               <div>这是内容</div>
               <div>这是内容</div>
               <div>这是内容</div>
               <div>这是内容</div>
               <div>这是内容</div>
               <div>这是内容</div>
               <div>这是内容</div>
               <div>这是内容</div>
               <div>这是内容</div>
               <div>这是内容</div>
               <div>这是内容</div>
               <div>这是内容</div>
               <div>这是内容</div>
               <div>这是内容</div>
               <div>这是内容</div>
               <div>这是内容</div>
            </div>
        </div>
        <div class="bar_box">
            <div class="bar"></div>
        </div>
    </div>

    <script>
        
        var wrapper = document.getElementsByClassName('wrapper')[0];
        //获取展示内容区的区域
        var view_box = document.getElementsByClassName('view_box')[0];
        //获取展示内容区的区域的大小
        var view_box_height = view_box.offsetHeight;
        //获取内容区
        var content = document.getElementsByClassName('content')[0];
        //获取内容区的实际高度
        var content_height = content.offsetHeight;
        //获取滑道
        var bar_box = document.getElementsByClassName('bar_box')[0];
        //获取滑道的高度
        var bar_box_height = bar_box.offsetHeight;
        //获取滚动条
        var bar = document.getElementsByClassName('bar')[0];
        
        //求 滚动条的高度

        //当展示的内容区的大小刚好展示内容区域时,滚动条的高度就是滑道的高度
        if(view_box_height / content_height < 1) {
            bar.style.height = (view_box_height / content_height) * bar_box_height + 'px';
        } else {
            bar.style.height = bar_box_height + 'px';
        }

        //绑定事件(做兼容处理)
        wrapper.onmousewheel = function (e){
        //    e.wheelDelta < 0 //(-120)  向下
        //    e.wheelDelta > 0 //(120)  向上
        scrollRoll(e);
        }
        //兼容  Firefox 
        wrapper.addEventListener('DOMMouseScroll',function (e) {
            // e.detail > 0  //(3)  滑轮向下滚动
            // e.detail < 0  //(-3)  滑轮向上滚动
            scrollRoll(e);
        },false)


        function scrollRoll (e) {
            e = e || window.event;
            if (e.detail > 0) {
                down();
            } else if (e.detail < 0) {
                up();
            }

            if (e.wheelDelta > 0) {
                up();
            } else if (e.wheelDelta < 0) {
                down();
            }
        }
        //滑轮向下滚动
        function down () {
            var speed = 8;
            if (bar.offsetTop >= bar_box_height - bar.offsetHeight) {
                bar.style.top = bar_box_height - bar.offsetHeight + 'px';
                //注意:内容区应该向上移动
                content.style.top = - (content_height - view_box_height) + 'px';
            } else {
                bar.style.top = bar.offsetTop + speed + 'px';
                content.style.top = - bar.offsetTop / (bar_box_height - bar.offsetHeight) * (content_height - view_box_height) + 'px';
            }
        }
        //滑轮向上滚动
        function up () {
            var speed = 8;
            if (bar.offsetTop <= 0) {
                bar.style.top = 0 + 'px';
                content.style.top = 0 + 'px';
            } else {
                bar.style.top = bar.offsetTop - speed + 'px';
                content.style.top = - bar.offsetTop / (bar_box_height - bar.offsetHeight) * (content_height - view_box_height) + 'px';
            }
        }
   </script>
</body>
</html>
海计划公众号
(0)
上一篇 2020/03/26 23:32
下一篇 2020/03/26 23:32

您可能感兴趣的内容

  • 原生js逻辑测试题及答案基础知识_测试入门基础

    01、屏幕打印2000到3000之间的所有的数。for (var i = 2000; i < 3001; i++){document.write(i+"
    “) }
    02、求450到550之间所有奇数的和。va

    2020/03/23
  • Node.js Async 函数最佳实践小白知识_async菜鸟攻略

    Node.js7.6起, Node.js 搭载了有async函数功能的V8引擎。当Node.js 8于10月31日成为LTS版本后,我们没有理由不使用async函数。接下来,我将简要介绍async函数,以及如何改变我们编写Node.js应用程序的方式。什么是async函数async函数可以让你编写基于Promise的代码使他像同步的一样。每当你用asnyc关

    2020/03/24
  • ES6的标准内置对象Proxy入门基础_Proxy小白指南

    Proxy是ES6规范定义的标准内置对象,可以对目标对象的读取、函数调用等操作进行拦截。一般来说,通过Proxy可以让目标对象“可控”,比如是否能调用对象的某个方法,能否往对象添加属性等等。const originalObj = {name: ‘xialei’
    };
    const publicObj = new Proxy(originalObj, {set(

    2020/03/23
  • 必须知道的程序员思维小白知识_程序员菜鸟知识

    工作写程序不是为了炫耀自己的技术,是要给公司创造价值,要确实帮助使用这个程序的人。以及之前说过的,当程序员就是为了提高社会效率。写高效的代码是每个程序员的追求,写易懂的代码是每个程序员的美德。易懂的代码首先是有规范的,从目录结构到代码风格,在项目建立初就应该确定,可以写进项目文档中,文档用于给初见项目或是接手的程序员一个概览,介绍一下整体结构,技术栈,以及一

    2020/03/30
  • TypeScript基础类型使用教程_类型使用说明

    介绍为了让程序有价值,我们需要能够处理最简单的数据单元:数字,字符串,结构体,布尔值等。 TypeScript支持与JavaScript几乎相同的数据类型,此外还提供了实用的枚举类型方便我们使用。布尔值最基本的数据类型就是简单的true/false值,在JavaScript和TypeScript里叫做boolean(其它语言中也一样)。let isDone:

    2020/03/23
  • ES6 Promise all 的实现使用说明_异步小白知识

    Promise 是ES6语法标准里的新定义,一般用来处理异步方法的同步执行。本文主要介绍Promise all的用法和实现。
    加入有以下场景:我有5个异步方法,需要等到这5个方法执行结束之后再执行下一步,如果其中有一个出错,则进入到catch方法里。具体实现如下:function promiseAll(arr){return new Promise((res

    2020/03/23
  • React框架学习使用指南关于React两种构建应用方式选择_React菜鸟知识

    作者:@EasonPeng本文为作者原创,转载请注明出处:https://www.cnblogs.com/eason-peng/p/8315185.html1. 传统模式构建一般在传统模式下,我们构建前端项目很简单。就是下载各种js文件,如JQuery、Echart等,直接放置在html静态文件。这样在这个前端项目中,默认生成或者是定义全局变量,从而使用js

    2020/04/05
  • Js判断null、undefined与NaN的方法小白帮助_类型入门教程

    写了个 str =”s”++; 然后出现Nan,找了一会。 收集资料如下判断:1.判断undefined:var tmp = undefined;
    if (typeof(tmp) == “undefined”){
    alert(“undefined”);
    }说明:typeof 返回的是字符串,有六种可能:”number”、”string”、”boolean

    2020/03/26
  • 精打细算浏览器空闲时间小白知识_浏览器菜鸟攻略

    来自:奇舞周刊,作者:黄小璐 有时候我们希望在浏览器中执行一些低优先级的任务,比如记录统计数据、做一些耗时的数据处理等,暂且将其称为后台任务。这些任务跟动画计算、合成帧、响应用户输入等高优先级的任务共享主线程。我们可能会面临这样的问题:正在执行的后台任务很耗时,会阻塞高优先级任务的执行,出现卡顿或者无响应的情况。有同学提出建议:把后台任务拆分到最小的可执行

    2020/04/03
  • js节点操作菜鸟教程下载_dom小白基础

    整个页面可以看成文档节点,节点用node表示。页面里面全是节点,元素节点, 属性节点,文本节点(文字,空格,换行),节点:一定有节点类型,节点名称,节点值节点类型的值: 元素节点为1,属性节点为2,文本节点为3通过节点,可以更好的获取元素。逻辑全在代码里面

    • <l

    2020/03/26
  • SpringMVC使用攻略EasyUI实现页面左侧导航菜单基础入门_easyui

    1. 效果图展示2. 工程目录结构注意: webapp下的resources目录放置easyui和js(jQuery文件是另外的)3. 代码index.jsp

    学生成绩管理系统 管理员后台<</p></div><div class="item-meta"> <span class="item-meta-li date">2020/03/26</span><div class="item-meta-right"></div></div></div></li><li class="item"><div class="item-img"> <a class="item-img-inner" href="https://wanghi.cn/202003/4753.html" title="Planetary.js使用帮助创建交互式Web地球仪js插件" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" class="attachment-default size-default wp-post-image j-lazy" alt="Planetary.js使用帮助创建交互式Web地球仪js插件" decoding="async" data-original="https://wanghi.cn/wp-content/uploads/2020/01/269-480x300.jpg" /> </a> <a class="item-category" href="https://wanghi.cn/baike/web" target="_blank">Web前端</a></div><div class="item-content"><h4 class="item-title"> <a href="https://wanghi.cn/202003/4753.html" target="_blank" rel="bookmark"> Planetary.js使用帮助创建交互式Web地球仪js插件 </a></h4><div class="item-excerpt"><p>Planetary.js基础入门 官方网址:http://planetaryjs.com GitHub:https://github.com/BinaryMuse/planetar…</p></div><div class="item-meta"> <span class="item-meta-li date">2020/03/05</span><div class="item-meta-right"></div></div></div></li><li class="item"><div class="item-img"> <a class="item-img-inner" href="https://wanghi.cn/202003/18707.html" title="5G对web前端发展的影响小白入门_5G基础知识教程" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" class="attachment-default size-default wp-post-image j-lazy" alt="5G对web前端发展的影响小白入门_5G基础知识教程" decoding="async" data-original="https://wanghi.cn/wp-content/uploads/2020/01/304-480x300.jpg" /> </a> <a class="item-category" href="https://wanghi.cn/baike/web" target="_blank">Web前端</a></div><div class="item-content"><h4 class="item-title"> <a href="https://wanghi.cn/202003/18707.html" target="_blank" rel="bookmark"> 5G对web前端发展的影响小白入门_5G基础知识教程 </a></h4><div class="item-excerpt"><p>5G对web前端发展的影响,5G浪潮的来临让全世界都为之关注,各个国家都在争夺它的主导权。它对软件行业影响是巨大的,深远的,甚至会导致行业的重新洗牌,和很多技术工种的兴衰。所以我们这些开发者不得不去关注它。 5G对web前端开发又有什么样的影响呢?网上各大论坛都有关于5G的帖子,据说理论下载速度达到 1.25G每秒。一个前端项目的本地文件往往不会超过100M</p></div><div class="item-meta"> <span class="item-meta-li date">2020/03/23</span><div class="item-meta-right"></div></div></div></li><li class="item"><div class="item-img"> <a class="item-img-inner" href="https://wanghi.cn/202003/24067.html" title="什么是HTML5前端开发?需要学哪些技术?小白帮助_前端攻略教程" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" class="attachment-default size-default wp-post-image j-lazy" alt="什么是HTML5前端开发?需要学哪些技术?小白帮助_前端攻略教程" decoding="async" data-original="https://wanghi.cn/wp-content/uploads/2020/03/5d341ba0ab752-1-480x300.jpg" /> </a> <a class="item-category" href="https://wanghi.cn/baike/web" target="_blank">Web前端</a></div><div class="item-content"><h4 class="item-title"> <a href="https://wanghi.cn/202003/24067.html" target="_blank" rel="bookmark"> 什么是HTML5前端开发?需要学哪些技术?小白帮助_前端攻略教程 </a></h4><div class="item-excerpt"><p>什么是HTML5前端开发?前端开发一般指网页开发,前端开发是从网页制作上演变过来的,网页上软件化的交互形式都是基于前段技术实现的。程序员指从事程序开发、维护的专业人员,其中程序员可以分为设计和编码两个部分。HTML5前端的发展前景可观,可以从事的工作也很多,比如:web前端开发工程师、HTML5开发工程师、web APP开发工程师、Java开发工程师等。那么</p></div><div class="item-meta"> <span class="item-meta-li date">2020/03/29</span><div class="item-meta-right"></div></div></div></li><li class="item"><div class="item-img"> <a class="item-img-inner" href="https://wanghi.cn/202003/20605.html" title="如何选择 Web 前端模板引擎?指南攻略_模板小白知识" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" class="attachment-default size-default wp-post-image j-lazy" alt="如何选择 Web 前端模板引擎?指南攻略_模板小白知识" decoding="async" data-original="https://wanghi.cn/wp-content/uploads/2020/01/092-480x300.jpg" /> </a> <a class="item-category" href="https://wanghi.cn/baike/web" target="_blank">Web前端</a></div><div class="item-content"><h4 class="item-title"> <a href="https://wanghi.cn/202003/20605.html" target="_blank" rel="bookmark"> 如何选择 Web 前端模板引擎?指南攻略_模板小白知识 </a></h4><div class="item-excerpt"><p>Web 模板就在那里模板引擎负责组装数据,以另外一种形式或外观展现数据。浏览器中的页面是 Web 模板引擎最终的展现。无论你是否直接使用模板引擎,Web 模板一直都在,不在前端就在后端,它的出现甚至可以追溯到超文本标记语言 HTML 标准正式确立之前。服务器端的模板引擎我所知道最早的 Web 模板引擎是 PHP,它正式诞生于 1997 年,工作在服务器端。让</p></div><div class="item-meta"> <span class="item-meta-li date">2020/03/24</span><div class="item-meta-right"></div></div></div></li><li class="item"><div class="item-img"> <a class="item-img-inner" href="https://wanghi.cn/202003/22436.html" title="MySQL中Explain初识攻略教程_mysql攻略教程" target="_blank" rel="bookmark"> <img class="j-lazy" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" data-original="https://wanghi.cn/wp-content/uploads/2020/01/285-480x300.jpg" width="480" height="300" alt="MySQL中Explain初识攻略教程_mysql攻略教程"> </a> <a class="item-category" href="https://wanghi.cn/baike/web" target="_blank">Web前端</a></div><div class="item-content"><h4 class="item-title"> <a href="https://wanghi.cn/202003/22436.html" target="_blank" rel="bookmark"> MySQL中Explain初识攻略教程_mysql攻略教程 </a></h4><div class="item-excerpt"><p>IndexMySQL索引的基本操作CREATE INDEX idx_price on OrderItems(item_price);<br /> ALTER TABLE OrderItems DROP INDEX idx_order_num_price;ExplainMySQL 提供了一个 EXPLAIN 命令, 它可以对 SELECT 语句进行分析, 并输出 SEL</p></div><div class="item-meta"> <span class="item-meta-li date">2020/03/26</span><div class="item-meta-right"></div></div></div></li></ul></div></article></main><aside class="sidebar"><div class="widget widget_image_myimg"> <a href="https://wanghi.cn/go.php?http://www.5118.com?promote=83864A" target="_blank" rel="nofollow"> <img class="j-lazy" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" data-original="https://wanghi.cn/img/5118/5118.png" alt="5118工具"> </a></div><div class="widget widget_image_myimg"> <a href="https://wanghi.cn/go.php?https://www.bt.cn/?invite_code=M19sbndpc3E=" target="_blank" rel="nofollow"> <img class="j-lazy" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" data-original="https://wanghi.cn/img/bt/b.png" alt="宝塔优惠券"> </a></div><div class="widget widget_image_myimg"> <a href="https://www.aliyun.com/activity/new/index?userCode=u1pc8ney" target="_blank" rel="nofollow"> <img class="j-lazy" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" data-original="https://wanghi.cn/img/right/aliyun.png" alt="阿里云广告"> </a></div><div class="widget widget_image_myimg"> <a href="https://wanghi.cn/go.php?https://url.cn/U4djljVv"> <img class="j-lazy" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" data-original="https://wanghi.cn/img/right/txyun.png" alt="腾讯云广告"> </a></div><div class="widget widget_tag_cloud"><h3 class="widget-title"><span>关注焦点</span></h3><div class="tagcloud"><a href="https://wanghi.cn/http/course/dedecms" class="tag-cloud-link tag-link-64 tag-link-position-1" style="font-size: 9.0606060606061pt;" aria-label="DedeCMS (1个项目)">DedeCMS</a> <a href="https://wanghi.cn/baike/seobook" class="tag-cloud-link tag-link-1648 tag-link-position-2" style="font-size: 17.29797979798pt;" aria-label="SEO书籍 (423个项目)">SEO书籍</a> <a href="https://wanghi.cn/seo/seohelp" class="tag-cloud-link tag-link-198 tag-link-position-3" style="font-size: 13.373737373737pt;" aria-label="SEO优化百科 (32个项目)">SEO优化百科</a> <a href="https://wanghi.cn/tool" class="tag-cloud-link tag-link-332 tag-link-position-4" style="font-size: 9.0606060606061pt;" aria-label="SEO工具 (1个项目)">SEO工具</a> <a href="https://wanghi.cn/seo/baimao" class="tag-cloud-link tag-link-254 tag-link-position-5" style="font-size: 12.949494949495pt;" aria-label="SEO白帽技术 (24个项目)">SEO白帽技术</a> <a href="https://wanghi.cn/baike" class="tag-cloud-link tag-link-637 tag-link-position-6" style="font-size: 10.474747474747pt;" aria-label="SEO百科 (4个项目)">SEO百科</a> <a href="https://wanghi.cn/seo/heimao" class="tag-cloud-link tag-link-255 tag-link-position-7" style="font-size: 10.121212121212pt;" aria-label="SEO黑帽技术 (3个项目)">SEO黑帽技术</a> <a href="https://wanghi.cn/baike/web" class="tag-cloud-link tag-link-1659 tag-link-position-8" style="font-size: 22pt;" aria-label="Web前端 (9,147个项目)">Web前端</a> <a href="https://wanghi.cn/http/course/wordpress" class="tag-cloud-link tag-link-52 tag-link-position-9" style="font-size: 13.762626262626pt;" aria-label="WordPress (42个项目)">WordPress</a> <a href="https://wanghi.cn/http/tao/yunyouhui" class="tag-cloud-link tag-link-12 tag-link-position-10" style="font-size: 9.6969696969697pt;" aria-label="云优惠 (2个项目)">云优惠</a> <a href="https://wanghi.cn/baike/yuns/cloudx" class="tag-cloud-link tag-link-1402 tag-link-position-11" style="font-size: 14.257575757576pt;" aria-label="云帮手 (58个项目)">云帮手</a> <a href="https://wanghi.cn/baike/yuns" class="tag-cloud-link tag-link-1386 tag-link-position-12" style="font-size: 8pt;" aria-label="云操作 (0个项目)">云操作</a> <a href="https://wanghi.cn/baike/yun" class="tag-cloud-link tag-link-691 tag-link-position-13" style="font-size: 10.121212121212pt;" aria-label="云服务 (3个项目)">云服务</a> <a href="https://wanghi.cn/http/tao" class="tag-cloud-link tag-link-11 tag-link-position-14" style="font-size: 8pt;" aria-label="优惠券 (0个项目)">优惠券</a> <a href="https://wanghi.cn/http" class="tag-cloud-link tag-link-13 tag-link-position-15" style="font-size: 8pt;" aria-label="传统网媒 (0个项目)">传统网媒</a> <a href="https://wanghi.cn/seohtml/caiji" class="tag-cloud-link tag-link-1362 tag-link-position-16" style="font-size: 10.474747474747pt;" aria-label="内容采集 (4个项目)">内容采集</a> <a href="https://wanghi.cn/http/tao/vip" class="tag-cloud-link tag-link-4 tag-link-position-17" style="font-size: 9.0606060606061pt;" aria-label="发放优惠券 (1个项目)">发放优惠券</a> <a href="https://wanghi.cn/media" class="tag-cloud-link tag-link-245 tag-link-position-18" style="font-size: 8pt;" aria-label="媒体矩阵 (0个项目)">媒体矩阵</a> <a href="https://wanghi.cn/baike/yuns/baota" class="tag-cloud-link tag-link-22000 tag-link-position-19" style="font-size: 9.0606060606061pt;" aria-label="宝塔面板 (1个项目)">宝塔面板</a> <a href="https://wanghi.cn/http/jianzhan" class="tag-cloud-link tag-link-306 tag-link-position-20" style="font-size: 9.0606060606061pt;" aria-label="建站案例 (1个项目)">建站案例</a> <a href="https://wanghi.cn/media/weixinseo" class="tag-cloud-link tag-link-230 tag-link-position-21" style="font-size: 11.535353535354pt;" aria-label="微信生态圈优化 (9个项目)">微信生态圈优化</a> <a href="https://wanghi.cn/media/weibo" class="tag-cloud-link tag-link-264 tag-link-position-22" style="font-size: 10.757575757576pt;" aria-label="微博生态圈优化 (5个项目)">微博生态圈优化</a> <a href="https://wanghi.cn/seo/baiduseo" class="tag-cloud-link tag-link-187 tag-link-position-23" style="font-size: 10.121212121212pt;" aria-label="搜索引擎优化 (3个项目)">搜索引擎优化</a> <a href="https://wanghi.cn/seo/googlescore" class="tag-cloud-link tag-link-294 tag-link-position-24" style="font-size: 9.6969696969697pt;" aria-label="搜索引擎算法 (2个项目)">搜索引擎算法</a> <a href="https://wanghi.cn/media/xmtseo" class="tag-cloud-link tag-link-260 tag-link-position-25" style="font-size: 10.121212121212pt;" aria-label="新媒体矩阵优化 (3个项目)">新媒体矩阵优化</a> <a href="https://wanghi.cn/hijihua" class="tag-cloud-link tag-link-535 tag-link-position-26" style="font-size: 11.818181818182pt;" aria-label="海计划 (11个项目)">海计划</a> <a href="https://wanghi.cn/sem" class="tag-cloud-link tag-link-302 tag-link-position-27" style="font-size: 9.0606060606061pt;" aria-label="王海SEM (1个项目)">王海SEM</a> <a href="https://wanghi.cn/seo" class="tag-cloud-link tag-link-19 tag-link-position-28" style="font-size: 8pt;" aria-label="王海SEO (0个项目)">王海SEO</a> <a href="https://wanghi.cn/tashuo" class="tag-cloud-link tag-link-391 tag-link-position-29" style="font-size: 13.833333333333pt;" aria-label="王海说 (44个项目)">王海说</a> <a href="https://wanghi.cn/internet" class="tag-cloud-link tag-link-1 tag-link-position-30" style="font-size: 12.525252525253pt;" aria-label="站务 (18个项目)">站务</a> <a href="https://wanghi.cn/toutiao" class="tag-cloud-link tag-link-380 tag-link-position-31" style="font-size: 11.676767676768pt;" aria-label="站友头条 (10个项目)">站友头条</a> <a href="https://wanghi.cn/http/course" class="tag-cloud-link tag-link-51 tag-link-position-32" style="font-size: 9.0606060606061pt;" aria-label="站友攻略 (1个项目)">站友攻略</a> <a href="https://wanghi.cn/http/zyzy" class="tag-cloud-link tag-link-40 tag-link-position-33" style="font-size: 9.0606060606061pt;" aria-label="站友资源 (1个项目)">站友资源</a> <a href="https://wanghi.cn/http/course/peizhi" class="tag-cloud-link tag-link-127 tag-link-position-34" style="font-size: 11.535353535354pt;" aria-label="站点配置 (9个项目)">站点配置</a> <a href="https://wanghi.cn/baike/yun/zoneidc" class="tag-cloud-link tag-link-1612 tag-link-position-35" style="font-size: 9.0606060606061pt;" aria-label="纵横云 (1个项目)">纵横云</a> <a href="https://wanghi.cn/http/domain" class="tag-cloud-link tag-link-7 tag-link-position-36" style="font-size: 12.59595959596pt;" aria-label="网站站长 (19个项目)">网站站长</a> <a href="https://wanghi.cn/admin" class="tag-cloud-link tag-link-17 tag-link-position-37" style="font-size: 10.757575757576pt;" aria-label="草根站长 (5个项目)">草根站长</a> <a href="https://wanghi.cn/media/yingxiao" class="tag-cloud-link tag-link-33411 tag-link-position-38" style="font-size: 20.19696969697pt;" aria-label="营销推广 (2,807个项目)">营销推广</a> <a href="https://wanghi.cn/baike/yun/aliyun" class="tag-cloud-link tag-link-693 tag-link-position-39" style="font-size: 12.878787878788pt;" aria-label="阿里云 (23个项目)">阿里云</a> <a href="https://wanghi.cn/http/tao/quan" class="tag-cloud-link tag-link-21 tag-link-position-40" style="font-size: 10.121212121212pt;" aria-label="领券 (3个项目)">领券</a></div></div><div class="widget widget_image_myimg"> <a href="#"> <img class="j-lazy" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" data-original="https://wanghi.cn/img/haijihua/mcn.jpg" alt="MCN二维码"> </a></div><div class="widget widget_post_thumb"><h3 class="widget-title"><span>热门推荐</span></h3><ul><li class="item"><div class="item-content item-no-thumb"><p class="item-title"><a href="https://wanghi.cn/202004/34652.html" title="动漫剧情式手游 中二病拯救世界即将来袭_鸟哥笔记">动漫剧情式手游 中二病拯救世界即将来袭_鸟哥笔记</a></p><p class="item-date">2020/04/18</p></div></li><li class="item"><div class="item-img"> <a class="item-img-inner" href="https://wanghi.cn/202003/12141.html" title="Mathpix指南攻略_图片转LaTeX公式工具"> <img width="480" height="300" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" class="attachment-default size-default wp-post-image j-lazy" alt="Mathpix指南攻略_图片转LaTeX公式工具" decoding="async" data-original="https://wanghi.cn/wp-content/uploads/2020/01/133-480x300.jpg" /> </a></div><div class="item-content"><p class="item-title"><a href="https://wanghi.cn/202003/12141.html" title="Mathpix指南攻略_图片转LaTeX公式工具">Mathpix指南攻略_图片转LaTeX公式工具</a></p><p class="item-date">2020/03/10</p></div></li><li class="item"><div class="item-img"> <a class="item-img-inner" href="https://wanghi.cn/202003/4873.html" title="commander.js使用帮助一个轻巧的nodejs模块,提供了用户命令行输入和参数解析强大功能"> <img width="480" height="300" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" class="attachment-default size-default wp-post-image j-lazy" alt="commander.js使用帮助一个轻巧的nodejs模块,提供了用户命令行输入和参数解析强大功能" decoding="async" data-original="https://wanghi.cn/wp-content/uploads/2020/01/014-480x300.jpg" /> </a></div><div class="item-content"><p class="item-title"><a href="https://wanghi.cn/202003/4873.html" title="commander.js使用帮助一个轻巧的nodejs模块,提供了用户命令行输入和参数解析强大功能">commander.js使用帮助一个轻巧的nodejs模块,提供了用户命令行输入和参数解析强大功能</a></p><p class="item-date">2020/03/06</p></div></li><li class="item"><div class="item-content item-no-thumb"><p class="item-title"><a href="https://wanghi.cn/202004/34736.html" title="手机游戏如何吸引品牌广告商?_鸟哥笔记">手机游戏如何吸引品牌广告商?_鸟哥笔记</a></p><p class="item-date">2020/04/18</p></div></li><li class="item"><div class="item-img"> <a class="item-img-inner" href="https://wanghi.cn/202003/6042.html" title="Pressure.js使用教程_用于处理Force Touch,3D Touch的Js库"> <img width="480" height="300" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" class="attachment-default size-default wp-post-image j-lazy" alt="Pressure.js使用教程_用于处理Force Touch,3D Touch的Js库" decoding="async" data-original="https://wanghi.cn/wp-content/uploads/2020/01/207-480x300.jpg" /> </a></div><div class="item-content"><p class="item-title"><a href="https://wanghi.cn/202003/6042.html" title="Pressure.js使用教程_用于处理Force Touch,3D Touch的Js库">Pressure.js使用教程_用于处理Force Touch,3D Touch的Js库</a></p><p class="item-date">2020/03/06</p></div></li></ul></div><div class="widget widget_image_myimg"> <a href="https://www.haiyunying.com/61.html" target="_blank"> <img class="j-lazy" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" data-original="https://wanghi.cn/wp-content/uploads/2022/06/2022060921253456.jpg" alt=""> </a></div></aside></div></div><footer class="footer width-footer-bar"><div class="container"><div class="footer-col-wrap footer-with-logo-icon"><div class="footer-col footer-col-logo"> <img src="https://wanghi.cn/img/fhi.png" alt="王海"></div><div class="footer-col footer-col-copy"><ul class="footer-nav hidden-xs"><li id="menu-item-1483" class="menu-item menu-item-1483"><a href="https://wanghi.cn/">©2022 成都私域运营专家-王海</a></li></ul><div class="copyright"><p><a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" rel="noopener">蜀ICP备19004414号</a></p></div></div><div class="footer-col footer-col-sns"><div class="footer-sns"> <a href="https://wanghi.cn/go.php?https://tongji.baidu.com/main/overview/10000118002/overview/index?siteId=14797428" aria-label="icon"> <i class="wpcom-icon fa fa-mouse-pointer sns-icon"></i> </a> <a class="sns-wx" href="javascript:;" aria-label="icon"> <i class="wpcom-icon fa fa-user-plus sns-icon"></i> <span style="background-image:url('https://wanghi.cn/img/wx/wx.png');"></span> </a> <a class="sns-wx" href="javascript:;" aria-label="icon"> <i class="wpcom-icon fa fa-wechat sns-icon"></i> <span style="background-image:url('https://wanghi.cn/img/wxxcx.jpg');"></span> </a></div></div></div></div></footer><div class="action action-style-0 action-color-0 action-pos-0" style="bottom:20%;"><div class="action-item gotop j-top"> <i class="wpcom-icon wi action-item-icon"><svg aria-hidden="true"><use xlink:href="#wi-arrow-up-2"></use></svg></i></div></div><div class="footer-bar"><div class="fb-item"> <a href="https://wanghi.cn" target="_blank"> <i class="wpcom-icon fa fa-home fb-item-icon"></i> <span>首页</span> </a></div><div class="fb-item"> <a href="https://wanghi.cn/img/wxxcx.jpg" class="j-footer-bar-qrcode"> <i class="wpcom-icon fa fa-dot-circle-o fb-item-icon"></i> <span>搜索SEO</span> </a></div><div class="fb-item"> <a href="https://wanghi.cn/img/wx/wx.png" class="j-footer-bar-qrcode"> <i class="wpcom-icon fa fa-sellsy fb-item-icon"></i> <span>加好友</span> </a></div></div> <script type='text/javascript' id='main-js-extra'>var _wpcom_js = {"webp":"","ajaxurl":"https:\/\/wanghi.cn\/wp-admin\/admin-ajax.php","theme_url":"https:\/\/wanghi.cn\/wp-content\/themes\/justnews","slide_speed":"50000","is_admin":"0","js_lang":{"copy_done":"\u590d\u5236\u6210\u529f\uff01","copy_fail":"\u6d4f\u89c8\u5668\u6682\u4e0d\u652f\u6301\u62f7\u8d1d\u529f\u80fd","confirm":"\u786e\u5b9a","qrcode":"\u4e8c\u7ef4\u7801","page_loaded":"\u5df2\u7ecf\u5230\u5e95\u4e86","no_content":"\u6682\u65e0\u5185\u5bb9","load_failed":"\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","expand_more":"\u9605\u8bfb\u5269\u4f59 %s"},"lightbox":"1","post_id":"22554","user_card_height":"356","poster":{"notice":"\u8bf7\u957f\u6309\u4fdd\u5b58\u56fe\u7247\uff0c\u5c06\u5185\u5bb9\u5206\u4eab\u7ed9\u66f4\u591a\u597d\u53cb","generating":"\u6b63\u5728\u751f\u6210\u6d77\u62a5\u56fe\u7247...","failed":"\u6d77\u62a5\u56fe\u7247\u751f\u6210\u5931\u8d25"},"video_height":"482","fixed_sidebar":"1","dark_style":"0","font_url":"\/\/wanghi.cn\/wp-content\/uploads\/wpcom\/fonts.9b34824582affe8e.css","follow_btn":"<i class=\"wpcom-icon wi\"><svg aria-hidden=\"true\"><use xlink:href=\"#wi-add\"><\/use><\/svg><\/i>\u5173\u6ce8","followed_btn":"\u5df2\u5173\u6ce8","user_card":"1"};</script> <script type='text/javascript' id='wpcom-member-js-extra'>var _wpmx_js = {"ajaxurl":"https:\/\/wanghi.cn\/wp-admin\/admin-ajax.php","plugin_url":"https:\/\/wanghi.cn\/wp-content\/plugins\/wpcom-member\/","post_id":"22554","js_lang":{"login_desc":"\u60a8\u8fd8\u672a\u767b\u5f55\uff0c\u8bf7\u767b\u5f55\u540e\u518d\u8fdb\u884c\u76f8\u5173\u64cd\u4f5c\uff01","login_title":"\u8bf7\u767b\u5f55","login_btn":"\u767b\u5f55","reg_btn":"\u6ce8\u518c"},"login_url":"https:\/\/wanghi.cn\/i","register_url":"https:\/\/wanghi.cn\/register","TCaptcha":{"appid":"2035109633"},"captcha_label":"\u70b9\u51fb\u8fdb\u884c\u4eba\u673a\u9a8c\u8bc1","captcha_verified":"\u9a8c\u8bc1\u6210\u529f","errors":{"require":"\u4e0d\u80fd\u4e3a\u7a7a","email":"\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u7535\u5b50\u90ae\u7bb1","pls_enter":"\u8bf7\u8f93\u5165","password":"\u5bc6\u7801\u5fc5\u987b\u4e3a6~32\u4e2a\u5b57\u7b26","passcheck":"\u4e24\u6b21\u5bc6\u7801\u8f93\u5165\u4e0d\u4e00\u81f4","phone":"\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u7535\u8bdd\u53f7\u7801","terms":"\u8bf7\u9605\u8bfb\u5e76\u540c\u610f\u6761\u6b3e","sms_code":"\u9a8c\u8bc1\u7801\u9519\u8bef","captcha_verify":"\u8bf7\u70b9\u51fb\u6309\u94ae\u8fdb\u884c\u9a8c\u8bc1","captcha_fail":"\u4eba\u673a\u9a8c\u8bc1\u5931\u8d25\uff0c\u8bf7\u91cd\u8bd5","nonce":"\u968f\u673a\u6570\u6821\u9a8c\u5931\u8d25","req_error":"\u8bf7\u6c42\u5931\u8d25"}};</script> <script type='text/javascript' id='QAPress-js-js-extra'>var QAPress_js = {"ajaxurl":"https:\/\/wanghi.cn\/wp-admin\/admin-ajax.php","ajaxloading":"https:\/\/wanghi.cn\/wp-content\/plugins\/qapress\/images\/loading.gif"};</script> <script>var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0f6d2bb7194b8728131ffadfe5c3e7c4"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();</script> <script type="application/ld+json">{ "@context": "https://schema.org", "@type": "Article", "@id": "https://wanghi.cn/202003/22554.html", "url": "https://wanghi.cn/202003/22554.html", "headline": "原生JS实现滚动条使用说明_滚动指南教程", "image": "https://wanghi.cn/wp-content/uploads/2020/01/206.jpg", "description": "求滚动条的高度可视内容区的高度 / 内容区的实际高度 = 滚动条的高度 / 滑道的高度求内容区top的值内容区距离顶部的距离 / (内容区的实际高度 - 可视内容区域的高度 ) = 滚动条距离顶部的距离 / ( 滑道的高度 - 滚动条的高度...", "datePublished": "2020-03-26T23:32:58", "dateModified": "2020-03-27T20:31:59", "author": {"@type":"Person","name":"Web前端","url":"https://wanghi.cn/member/web","image":"//wanghi.cn/wp-content/uploads/member/avatars/abfcfa5649e7003b.1583781931.jpg"} }</script> <script defer src="https://wanghi.cn/wp-content/cache/autoptimize/js/autoptimize_9e85a7cedb1bdce2a07a2bd41d57568a.js"></script></body></html>