js中scroll滚动相关

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

原文地址:https://www.cnblogs.com/pythonywy/p/11617664.html

时间: 2024-08-26 18:33:51

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

JS中字符串的相关操作

(转自:http://www.cnblogs.com/zhaoxinxin/articles/1402733.html) 一.字符串的创建 创建一个字符串有几种方法. 最简单的是用引号将一组字符包含起来,可以将其赋值给一个字符串变量. var myStr = "Hello, String!"; 可以用双引号或单引号将字符串包含,但要注意,作为界定字符串的一对引号必须是相同的,不能混用. 像var myString = "Fluffy is a pretty cat.'; 这样

js中数组字符串相关

1.字符串转数组 var s = "abc,abcd,aaa";ss = s.split(",");// 在每个逗号(,)处进行分解. 2.数组转字符串 var a, b;a = new Array(0,1,2,3,4);b = a.join(","); 3.查询数组中是否包含某元素 var num=jQuery.inArray(value, array); 解释:返回value在数组中的位置,从0开始计数(如果没有找到则返回 -1 ). 4.j

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

节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只读 Node.textContent //返回当前节点和它的所有后代节点的文本内容,可读写 Node.baseURI //返回当前网页的绝对路径 Node.ownerDocument //返回当前节点所在的顶层文档对象,即document Node.nextSibling //返回紧跟在当前节点后面

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

对象类型: 原始数据类型存储的是值,而对象类型存储的是地址(指针).下面的这个例子就比较有意思了. 先看题: function test(person) { person.age = 26 person = { name: 'yyy', age: 30 } return person } const p1 = { name: 'yck', age: 25 } // 问题1: const p2 = test(p1) console.log(p1) //---->??? // 答案1:{name:'

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

查询属性: 可以用 对象.属性 来查询属性和属性方法               或者                    对象[“属性”]  来查询属性和属性方法 演示代码: 1 <script> 2 var obj ={ 3 username:"ziksang", 4 age:22, 5 addr:"北京", 6 say:function(){ 7 return "我的名字叫 "+this.username //解析this,此

js中构造函数的相关知识点

首先大家需要先明白几个概念,我也是踩过几个坑才发现构造函数并不是我们所想的那么简单的, 公有属性:就是构造函数的时候this所指向的那个属性,这是为了让所有实现这个构造函数的实例都能有的属性: 公有方法:同上. 私有属性:就是构造函数中通过var xx:所声明的那个属性,为何叫私有呢,因为他是在构造函数所在的作用域内声明的,因此叫做私有: 私有方法:同上私有属性的理解: 静态属性和静态方法(其实我是感觉很奇葩的):通过调用  构造函数名.xxx 实现的属性和方法,这个方法区别于私有属性和方法的最

js中表格的相关操作

tHead:表头 tBodies:表格正文 tFoot:表格尾 rows:行 cells:列 表格的应用: 1.获取 2.表格创建 3.隔行变色 4.删除一行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格操作</title> </head> <body> <scrip

js 中制作滚动特效的常见属性

页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth   (包括边线的宽); 网页可见区域高: document.body.offsetHeight (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: document.body.scrollHeight; 网页被卷去的高: doc

原生 JS 中对象相关 API 合集

https://juejin.im/entry/58f8a705a0bb9f0065a4cb20 原文链接:https://microzz.com/2017/04/20/jsobject/ 原生 JavaScript 中对象相关 API 合集 - 对象篇.现在 jQuery 已经没有那么有优势了,原生 JS 赶紧学起来... -- 由microzz分享 Microzz [email protected] 主页 文章 标签 GitHub 关于我 掘金专栏 SegmentFault Vue音乐播放器