前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js中scroll滚动相关

js中scroll滚动相关

作者头像
小小咸鱼YwY
发布2020-06-19 15:54:20
7.8K0
发布2020-06-19 15:54:20
举报
文章被收录于专栏:python-爬虫

js中scroll滚动相关

scroll,滚动,一般讨论的是网页整体与浏览器之间的关系。

一.元素相关

属性/方法

解释

element.scrollHeight

返回元素的整体高度。

element.scrollWidth

返回元素的整体宽度。

element.scrollLeft

返回元素左边缘与视图之间的距离。

element.scrollTop

返回元素上边缘与视图之间的距离。

这四个属性,全部是只读属性

其中,无非就是分为宽高左上。 两个方向。

1.scrollHeight 和 scrollWidth

  • 使用scrollHeight和scrollWidth属性返回元素的高度,单位为px,包括padding
  • scrollHeight 和 scrollWidth返回的数值是包括当前不可见部分的。
  • scrollHeight 和 scrollWidth 属性为只读属性

2.scrollLeft 和 scrollTop

  • 需要一个监听方法
  • 还存在浏览器兼容问题

二.窗口相关

1.window对象的scrollBy() 和scrollTo()

1.scrollBy(x,y)

scrollBy(x,y)方法滚动当前window中显示的文档,x和y指定滚动的相对量。

scrollBy(0, 200) ==> 使得滚动条Y轴的位置,在当前的基础上增加200。比如:当前Y轴位置为0,执行后便是200;当前为100,执行后便是300。

  • 要使此方法工作 window 滚动条的可见属性必须设置为true!
2.scrollTo(x,y)

scrollTo(xpos,ypos)

  • xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
  • ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标。

scrollTo(x,y)方法:滚动当前window中显示的文档,让文档中由坐标x和y指定的点位于显示区域的

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-10-02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • js中scroll滚动相关
  • 一.元素相关
    • 1.scrollHeight 和 scrollWidth
      • 2.scrollLeft 和 scrollTop
      • 二.窗口相关
        • 1.window对象的scrollBy() 和scrollTo()
          • 1.scrollBy(x,y)
          • 2.scrollTo(x,y)
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档