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指定的点位于显示区域的

js中scroll滚动相关的更多相关文章

  1. 原生JS中DOM节点相关API合集

    节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只 ...

  2. 面试题-JS中的作用域相关问题

    对象类型: 原始数据类型存储的是值,而对象类型存储的是地址(指针).下面的这个例子就比较有意思了. 先看题: function test(person) { person.age = 26 perso ...

  3. js 中对象--属性相关操作

    查询属性: 可以用 对象.属性 来查询属性和属性方法               或者                    对象[“属性”]  来查询属性和属性方法 演示代码: <script ...

  4. JS中字符串的相关操作

    一.字符串的创建 创建一个字符串有几种方法.最简单的是用引号将一组字符包含起来,可以将其赋值给一个字符串变量. var myStr = "Hello, String!"; 可以用双 ...

  5. js中setinterval 的相关使用

    1.setinterval 方法 setinterval()是定时调用的函数,可按照指定的周期(以毫秒计)来调用函数或计算表达式. 2.创建一个setinterval 方法 setInterval(s ...

  6. js中表格的相关操作

    tHead:表头 tBodies:表格正文 tFoot:表格尾 rows:行 cells:列 表格的应用: 1.获取 2.表格创建 3.隔行变色 4.删除一行 <!DOCTYPE html> ...

  7. 关于js中this关键字的补充

    前面: 前面虽然综合了网络上不少大牛的心得,但感觉还是意犹未尽,为了彻底搞清楚js中this的相关知识,决定再写一篇.个人觉得,在技术上,除非钻到细枝末节,否则很难达至非常高的水平. 补充1: 无法重 ...

  8. python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  9. python 全栈开发,Day54(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...

随机推荐

  1. PHP中抽象类和接口的区别

    抽象类 抽象类无法被实例化,它的作用是为所有继承自它的类定义(或部分实现)接口. 使用 abstract 关键字定义抽象类. 可以像在普通类中那样在抽象类中创建方法和属性,在大多数情况下,一个抽象类至 ...

  2. C#线程学习笔记八:async & await入门一

    一.涉及内容 async & await是C# 5.0引入的,控制台输出所使用的$符号(拼接字符串)是C# 6.0引入的,其功能类似于string.Format()方法. 二.多线程.异步.同 ...

  3. 全字段多条件搜索(api接口)

    近期在做项目时遇到了一个全表全字段多条件搜索的需求,在平时搜索最常见的就是 字段+like +‘% 条件%’这种模式,但遇到多条件多字段时,这种就不适用了. 表字段已知,条件未知,条件数量未知,这种情 ...

  4. JS---offset系列和scroll系列

    元素的样式属性是无法直接通过:对象.style.属性来获取(样式在style属性中设置)   offset系列: offsetLeft:距离左边位置的值 offsetTop:距离上面位置的值 offs ...

  5. 61-如何使用 Weave 网络?

    weave 是 Weaveworks 开发的容器网络解决方案.weave 创建的虚拟网络可以将部署在多个主机上的容器连接起来.对容器来说,weave 就像一个巨大的以太网交换机,所有容器都被接入这个交 ...

  6. idea2019注册码,亲测可用!

    2019已经过半了,最近可把我忙死了,好久没打理这里的留言了. 今天登上来,看到许多同学反馈按照之前的那篇文章 IntelliJ IDEA 2018激活码 永久破解 里的步骤无法破解idea,其实用这 ...

  7. sqlserver update join 多关联更新

    由于程序bug,导致之前很多数据入库后信息不全,好在有基础信息表,可以通过基础信息表更新缺失字段信息 1.通过 inner join语法实现多关联更新 update a set a.name = b. ...

  8. docker拉取慢(net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting head)

    systemctl restart docker在docker-hub拉取慢,因为服务器在外网 直接配置阿里云镜像就可以 首先: vim /etc/docker/daemon.json加入下面的那句 ...

  9. 文件系统常用命令与fdisk分区

    一.硬盘结构 1.硬盘的逻辑结构 硬盘的大小是使用"磁头数×柱面数×扇区数×每个扇区的大小"这样的公式来计算的.其中磁头数(Heads)表示硬盘总共有几个磁头,也可以理解成为硬盘有 ...

  10. Feign Date类型时间错误问题

    问题 在feign传输date类型的数据时,在调用方时间正确,而被调用方获取时时间会相差14个小时. 原因 Feign客户端在进行通信时,会将Date类型对象转为String类型,如果这个时间是北京时 ...