滚动事件

来源：互联网发布：淘宝卖中药材编辑：程序博客网时间：2024/06/08 09:15

一：体会

js已经看了很久了，也用了里面的很多东西了，但是忽然发现，竟然还没有用过滚动事件，连滚动事件的函数代码都不知道怎么写，便查了下它的使用方法；

二：查询知识

document.body是DOM中Document对象里的body节点
document.documentElement是文档对象根节点(html)的引用
scrollHeight: 获取对象的滚动高度
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度

三：代码

html代码：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>滚动事件</title>        <link rel="stylesheet" href="css/scroll.css" />    </head>    <body>        <div class="mes">            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss            assssss        </div>        <div class="scrollTop">回到顶部</div>        <script src="js/scroll.js"></script>    </body></html>

css代码：

.scrollTop{    border:1px solid red;    font-family: '宋体';    font-size:16px;    border-radius: 2px;    padding:2px;    position:fixed;    bottom:20px;    right:20px;    cursor:pointer;}.mes{    width:10px;}

javascript代码：

window.onload = function(){    window.onscroll = function(){    //先获取html或者body元素距离顶部距离        var top = document.documentElement.scrollTop || document.body.scrollTop;        var d_top = document.getElementsByClassName("scrollTop");        if(top > 0){            d_top[0].style.display ="block";        }else{            d_top[0].style.display ="none";        };    };};

我还是个小菜鸟，如果有错误请在评论中指出，谢谢~~~

阅读全文

0 0