html 的scor属性,HTML DOM scrollTop 属性

HTML DOM scrollTop 属性

JavaScript Element scrollTop 属性

定义和用法

scrollTop属性设置或返回元素内容垂直滚动的像素数。

提示：使用scrollLeft属性设置或返回元素内容水平滚动的像素数。

提示：要将滚动条添加到元素，请使用CSS overflow属性。

提示：onscroll当一个元素的滚动条被滚动发生的事件。

浏览器支持

所有浏览器都支持scrollTop 属性。

语法

返回scrollTop属性：element.scrollTop

设置scrollTop属性：element.scrollTop = pixels

属性值属性

类型

描述

pixels

Number

指定元素内容水平滚动的像素数。特别说明：

如果该数字为负值，则该数字设置为“0”

如果无法滚动元素，则数字设置为“0”

如果该数字大于允许的最大滚动量，则将该数字设置为最大数量

技术细节

返回值：一个数字，表示元素内容已水平滚动的像素数

DOM版本：

实例

例1：获取

元素的内容水平和垂直滚动的像素数：请输入您的代码html>xinbiancheng.cn

#myDIV {

height: 250px;

width: 250px;

overflow: auto;

}

#content {

height: 800px;

width: 2000px;

background‐color: coral;

}

在div元素内滚动以显示div的内容水平和垂直滚动的像素数。

在我里面滚动！

function myFunction() {

var elmnt = document.querySelector("#myDIV");

var x = elmnt.scrollLeft;

var y = elmnt.scrollTop;

document.querySelector ("#demo").innerHTML = "Horizontally: " + x + "px
Vertically: " + y + "px";

}

输出：

在div元素内滚动以显示div的内容水平和垂直滚动的像素数。

在我里面滚动！

例2：将

元素的内容滚动到水平50像素和垂直10像素：html>xinbiancheng.cn

#myDIV1 {

height: 250px;

width: 250px;

overflow: auto;

}

#content1 {

height: 800px;

width: 2000px;

background‐color: coral;

}

单击按钮将div的内容水平滚动到50px，垂直滚动10px。

滚动div的内容

div元素中的一些文本。

function myFunction1() {

var elmnt = document.querySelector("#myDIV1");

elmnt.scrollLeft = 50;

elmnt.scrollTop = 10;

}

输出：

单击按钮将div的内容水平滚动到50px，垂直滚动10px。滚动div的内容

div元素中的一些文本。

例3：滚动

元素的内容BY 50个水平像素和10个垂直像素：

请写文章内容html>

xinbiancheng.cn

#myDIV2 {

height: 250px;

width: 250px;

overflow: auto;

}

#content2 {

height: 800px;

width: 2000px;

background‐color: coral;

}

单击该按钮，可将DIV的内容水平滚动50px，垂直滚动10px。

提示: 多次点击按钮，每次滚动相同数量。

DIV的滚动内容

DIV元素中的一些文本。

function myFunction2() {

var elmnt = document.querySelector("#myDIV2");

elmnt.scrollLeft += 50;

elmnt.scrollTop += 10;

}

输出：

单击该按钮，可将DIV的内容水平滚动50px，垂直滚动10px。

提示: 多次点击按钮，每次滚动相同数量。

DIV的滚动内容

DIV元素中的一些文本。

html 的scor属性,HTML DOM scrollTop 属性相关推荐

javascript的操作DOM的属性
DOM JavaScript分三个部分 ECMAScript标准: JS 的基本语法 DOM: Document Object Model ---> 文档对象模型-----操作页面的元素 BOM ...
js DOM Element属性和方法整理
js DOM Element属性和方法整理节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. ...
javascript原生事件句柄、BOM、DOM对象属性方法总结
javascript原生事件句柄.BOM.DOM对象属性方法总结 JS事件句柄事件句柄类型说明 onabort 事件句柄图像加载被中断 onblur 事件句柄元素失去焦点 onfocus 事 ...
scrollTop属性
scrollTop做浏览器的兼容: var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 解释: (1 ...
JS操作DOM元素属性和方法
Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问 ...
html dom的nodetype值介绍,HTML DOM nodeType 属性
HTML DOM nodeType 属性实例获得 body 元素的节点类型: document.body.nodeType; 结果: 1 定义和用法 nodeType 属性返回以数字值返回指定节点 ...
html属性和dom属性的区别,HTML属性与DOM属性的区别？
RT BTW,这样的文章我还是没有读懂 http://www.cnblogs.com/tomkillua/archive/2012/08/15/2639420.html 对于浏览器引擎而言,并不存在& ...
jQuery: 选择器(DOM,name,属性,元素)
出处:http://www.cnblogs.com/starof/p/5411457.html 大部分选择器都是基于下面这个简单的页面: <!DOCTYPE html> <html ...
html动态资源加载进度,JavaScript_快速解决js动态改变dom元素属性后页面及时渲染的问题，今天实现一个进度条加载过程 - phpStudy...
快速解决js动态改变dom元素属性后页面及时渲染的问题今天实现一个进度条加载过程,dom结构其实就是两个div 控制里层div的宽width属性,就能实现进度条往前走的效果. 我的进度条是显示下载文 ...
JavaScript学习（二十一）—scrollTop属性和scrollLeft属性
1.scrollTop属性作用:获取在拉动滚动条时被隐藏的内容的高度获取格式:节点.scrollTop 设置格式:节点.scrollTop=值: 注意:返回的结果也是数值型 <style&g ...

html 的scor属性,HTML DOM scrollTop 属性

html 的scor属性,HTML DOM scrollTop 属性相关推荐

最新文章

热门文章