JavaScript学习笔记——scroll

最新推荐文章于 2021-12-28 16:50:24 发布

希魔王的塔罗牌

最新推荐文章于 2021-12-28 16:50:24 发布

阅读量296

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Nozomi0609/article/details/108701365

版权

onscroll()

用鼠标滚轮，滚动网页的时候，会触发window.onscroll()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 1000px;
        }
    </style>
</head>
<body>
    <script>
        window.onscroll = function(){
            console.log("你动鼠标滚轮了");
        }
    </script>
</body>
</html>

在这里插入图片描述

ScrollWidth 和 scrollHeight

获取盒子的宽高。调用者为节点元素；不包括 border和margin

scrollWidth = width + padding
scrollHeight = height + padding

注意：

scrollHeight有一个特点：

如果文字超出了盒子，高度为内容的高（包括超出的内容）
不超出，则是盒子本身高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .d1{
            width: 100px;
            height: 100px;
            padding: 20px;
            margin: 10px;
            border: 10px solid blue;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2">有一说一，这件事大家懂的都懂，不懂的，说了你也不明白，不如不说。你们也别来问我怎么了，利益牵扯太大，说了对你们也没什么好处，当不知道就行了，其余的我只能说这里面水很深，牵扯到很多大人物，详细资料你们自己找是很难的，网上大部分都被删干净了，所以我只能说懂的都懂，不懂的也没办法</div>
    </div>
    <script>
        var d1 = document.querySelector(".d1");
        console.log(d1.scrollWidth);
        //140
        console.log(d1.scrollHeight);
        //526
    </script>
</body>
</html>

在这里插入图片描述

scrollTop 和 scrollLeft

网页被卷去的头部和左边的部分。

比如说，一个网页往上滚动的时候，上面的部分自然被浏览器遮挡了，遮挡的高度就是scrollTop。

scrollTop 这个属性的写法要注意兼容性

兼容性写法：

window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;

将 scrollTop 和 scrollLeft封装为 json

将 scrollTop 和 scrollLeft封装为一个方法，名叫scroll()，返回值为 json

json里的键为 top 和 left。以后就直接调用json.top 和json.left

获取 html 文档的方法

获取title、body、head、html标签的方法如下

document.title 文档标题
document.head 文档的头标签
document.body 文档的body标签
document.documentElement 文档的html标签

scrollBy()

scrollBy(xnum,ynum)

// xnum : 把文档向右滚动的像素数(必需)
// ynum : 把文档向下滚动的像素数(必需)

scrollTo()

scrollTo(xpos,ypos)

// xpos : 要在窗口文档显示区左上角显示的文档的 x 坐标(必需)
// ypos : 要在窗口文档显示区左上角显示的文档的 y 坐标(必需)

希魔王的塔罗牌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记——scroll

onscroll()用鼠标滚轮，滚动网页的时候，会触发window.onscroll()方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&
复制链接

扫一扫