scroll、client、offset系列的区分

John_Crown

已于 2023-03-22 13:48:17 修改

阅读量104

点赞数 1

文章标签：滚动条样式 CSS ::-webkit-scrollbar 滚动事件前端开发

于 2022-11-13 10:09:32 首次发布

本文链接：https://blog.csdn.net/John_Crown/article/details/127748969

版权

代码部分

滚动条的默认样式以及如何修改样式

代码部分

<!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>Document</title>
    <style>
        body{
            height: 1200px;
        }
        div {
            position: relative;
            top: 20px;
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
            padding: 10px;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div>
        我是内容 我是内容  我是内容 我是内容  我是内容 我是内容  我是内容 我是内容  我是内容 我是内容  我是内容 我是内容  我是内容 我是内容  我是内容 我是内容  我是内容 我是内容  我是内容 我是内容  我是内容 我是内容  我是内容 我是内容  我是内容 我是内容 
    </div>
    <script>
        // // 纵向参数
        // var div = document.querySelector('div');
        // console.log('clientHeight，元素含内边距的高度为' + div.clientHeight);  //220      height+padding
        // console.log('clientTop，元素含内边距的高度为' + div.clientTop);  //10      border-top/bottom
        // console.log('offsetHeight，元素含外边距的高度为' + div.offsetHeight);  //240      height+padding+margin
        // console.log('offsetTop，元素距离页面边缘的距离为' + div.offsetTop);        //0        top
        // console.log('scrollHeight，元素内容的高度为' + div.scrollHeight);  //249      hiddenContent
        // console.log('scrollTop，元素内容被卷起的高度为' + div.scrollTop);        //0        top

        // // scroll滚动事件当我们滚动条发生变化会触发的事件
        // window.addEventListener('scroll', function() {
        //     console.log('页面被卷起的高度'+parseInt(document.documentElement.scrollTop));
        // })
        // div.addEventListener('scroll', function() {
        //     console.log('div被卷起的高度'+parseInt(div.scrollTop) );
        // })

        // 横向参数
        var div = document.querySelector('div');
        console.log('clientWidth，元素内边距不含滚动条17的宽度为' + div.clientWidth);  //203      width+padding-滚动条宽度17
        console.log('clientLeft，左边框宽度宽度为' + div.clientLeft);  //10      border-left/right
        console.log('offsetWidth，元素含外边距的宽度为' + div.offsetWidth);  //240      width+padding+margin
        console.log('offsetLeft，元素距离页面边缘的距离为' + div.offsetLeft);        //8        left
        console.log('scrollWidth，元素内容的宽度为' + div.scrollWidth);  //203      hiddenContent
        console.log('scrollLeft，元素内容被卷起的宽度为' + div.scrollLeft);        //0        left

        window.addEventListener('scroll', function() {
            console.log('页面被卷起的宽度'+parseInt(document.documentElement.scrollLeft));
        })
        div.addEventListener('scroll', function() {
            console.log('div被卷起的宽度'+parseInt(div.scrollLeft) );
        })
    </script>
</body>
</html>

请复制以上代码到编辑器里，自行修改css属性体会这三个系列的区别

滚动条的默认样式以及如何修改样式

滚动条的位置包括在padding里，且宽17px，这是默认样式，也可以修改

下方给出修改滚动条样式方法的链接，侵删

CSS 设置滚动条样式 ::-webkit-scrollbar - 槑孒 - 博客园

浏览器滚动条样式设置 - 菜鸟成长日记lx - 博客园

John_Crown

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
scroll、client、offset系列的区分

滚动条的位置包括在padding里，且宽17px，这是默认样式，也可以修改。请复制以上代码到编辑器里，自行修改css属性体会这三个系列的区别。下方给出修改滚动条样式方法的链接，侵删。
复制链接

扫一扫