元素滚动 scroll 与 scroll 事件

卡卡西最近怎么样

已于 2022-05-27 12:56:11 修改

阅读量2.4k

点赞数 10

分类专栏： JavaScript 零基础入门文章标签：前端 javascript 开发语言 css html

于 2022-03-20 11:21:53 首次发布

本文链接：https://blog.csdn.net/weixin_52212950/article/details/123609373

版权

JavaScript 零基础入门专栏收录该内容

80 篇文章 43 订阅

订阅专栏

scroll 翻译过来就是滚动的意思，我们使用 scroll 的相关属性可以得到元素大小与滚动距离等等

scroll 的相关属性：

element.scrollTop：返回滚动后被卷上去的距离，返回值无单位
element.scrollLeft：返回滚动后被卷到左边的距离，返回值无单位
element.scrollWidth：返回自身的实际宽度（包含padding，不包含边框）
element.scrollHeight：返回自身的实际高度（包含padding，不包含边框）

我们在此主要研究 element.scrollTop 与 element.scrollHeight，其他两个同理

一： element.scrollHeight：

返回自身的实际高度（包含padding，不包含边框），返回值无单位，主要针对的是内容超过了盒子大小溢出的情况，返回的值包括了溢出的高度

例如以下情况：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2h5Y2h6KW_5pyA6L-R5oCO5LmI5qC3,size_20,color_FFFFFF,t_70,g_se,x_16

我们此时使用此方法返回的不再是盒子大小 200，而是包括了溢出部分的高度

<style>
    div{
      width: 200px;
      height: 200px;
      border: 10px solid red;
      background-color: rgb(255, 215, 105);
    }
  </style>
</head>
<body>
  <div>我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友</div>
  <script>
    var div=document.querySelector('div');
    console.log(div.scrollHeight);
  </script>
</body>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2h5Y2h6KW_5pyA6L-R5oCO5LmI5qC3,size_20,color_FFFFFF,t_70,g_se,x_16

二：element.scrollTop：

返回滚动后被卷上去的距离，返回值无单位，此处说的滚动上去是我们针对溢出的情况，往往会在样式里加上 overflow：auto，这是给盒子加上了滚动条，就可以拖动滚动条查看溢出的部分，所以此时返回的值是 拖动滚动条后，内容是相对往上移动的，返回值就是向上移动的那部分的高度

（但在此处我们还需要补充一个事件：scroll事件，即拖动滚动条就会触发）

<style>
    div{
      width: 200px;
      height: 200px;
      border: 10px solid red;
      background-color: rgb(255, 215, 105);
      overflow: auto;  //滚动条
    }
  </style>
</head>
<body>
  <div>我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友</div>
  <script>
    var div=document.querySelector('div');
    div.addEventListener('scroll',function(){  //拖动滚条就会触发事件
      console.log(div.scrollTop);
    })
  </script>
</body>

可以看到拖动滚动条的过程中，事件被触发，其输出 element.scrollTop 的值一直在变化，这个值就是被拖动到盒子上方的高度

还要注意这个是元素中被卷上去的高度，如果是要得到页面被卷上去的高度，则应写成 window.pageYOffset

卡卡西最近怎么样

关注

10
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
元素滚动 scroll 与 scroll 事件

scroll 翻译过来就是滚动的意思，我们使用 scroll 的相关属性可以得到元素大小与滚动距离等等scroll 的相关属性： element.scrollTop：返回滚动后被卷上去的距离，返回值无单位 element.scrollLeft：返回滚动后被卷到左边的距离，返回值无单位 element.scrollWidth：返回自身的实际宽度（包含padding，不包含边框） element.scrollHeight：返回自身的实际高度（包含padding，不包含边框
复制链接

扫一扫