scrolltop和scrollheight

2026-09-10

scrollTop、scrollHeight与clientHeight

MDN上概念 scrollTop:获取或设置一个元素的内容垂直滚动的像素数. scrollHeight:一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容. clientHeight:元素内部的高度(单位像素),包含内边距,但不包括水平滚动条.边框和外边距. 只看概念,似懂非懂,还是要自己测试一遍才知道,做个记录,以下为谷歌浏览器测试. css .box { height: 500px; width: 300px; overflow: scroll; color: #fff; } htm

各种位置和高度计算:.position()、.offset()、.outerHeight()、.scrollTop、.scrollHeight、.clientHeight

1..position()和.offset() jquery的.position()获取相对于最近的position为relative或absolute的父元素的偏移,返回.position().left和.position().top,不算上自己的margin-left: jquery的.offset()获取相对于视口左上角的偏移,返回.offset().left和.offset().top, 算上自己的margin-left,,还可以设置.offset({left:,top:});这个很有用

js的onscroll、scrollTop、scrollHeight及window.scroll等方法

onscroll 解释:当元素的滚动条滚动时触发的事件. onscroll事件貌似任何实体元素都可以绑定,这里的实体元素包括DOM元素.window元素.document元素. 用法即:element.onscroll=function(){}; 需要注意的是,滚动条一定要出现,而且滚动条是属于这元素的,例如: <div id="wrap" style="height:100px;overflow:auto;"> <div id="inn

【日常总结】scrollTop、scrollHeight与clientHeight的重要关系

前言在做一个需求的时候涉及懒加载,百度了一下,发现scrollTop.scrollHeight与clientHeight这三个元素起到了重要作用,以前做过类似demo但是时间过太久忘记了,现在已经完全分不清这个三个属性的区别,现在再重新复习一下一.scrollTop 定义:获取或设置元素的内容向上滚动的像素值特点:1.未设置时默认为0 2.为负值时不做任何响应 3.设置为超出本身最大值时,默认为最大值二.clientHeight 定义:clientHeight = CSS heigh

理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight

一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和offsetTop 事件源元素相对于父节点的偏移的像素值. 三.offsetWidth和offsetHeight 获取的是元素的宽度,包含border,padding,内容宽度,以及滚动条的宽度,和element.getBoundingClientRect()的值是一致的. 四.clientWidth

JavaScript--clientX,clientY、pageX,pageY、offsetLeft,offsetTop/offsetWidth,offsetHeight、scrollLeft,scrollTop/scrollWidth,scrollHeight、clientHeight,clientWidth区别

/*在事件的内部console.dir(event)*/ /** * 事件对象event * clientX/clientY 获取鼠标基于浏览器窗口(可视区域的坐标位置)全兼容 * * pageX/pageY 获取鼠标基于网页文本的坐标位置 ie8不兼容 * -- 兼容方案:clintY+页面滚动出去垂直距离 * */ /** * console.dir(element) * 元素element * offsetLeft/offsetTop 获取基于offsetParent<--当前元素的定位父

offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别

这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离最近的一个定位的父元素的上边距是60px. 这里,在控制台打印出各个高度值: var c =document.getElementsByClassName('content')[0]; console.log(c.offsetTop,c.offsetHeight,c.clientHeight,c.s

关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究

我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var node1 = document.querySelector('#father'); var node2 = document.querySelector('#child'); console.log('offsetTop==offsetHeight==scrollTop==scrollHeight==cli

JQuery Div scrollTop ScrollHeight

jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop.scrollLeft.scrollHeight.其中 scrollHeight 属性,互联网上几乎搜素不到关于它的应用技巧,而我正好需要用到它. 我们现在只探讨和垂直滚动有关的 scrollTop.scrollHeight 属性. 一.滚动条有关属性的正确理解: 假设有以下Html代码: <div id="div1" style="overflow-y:auto; ove

scrollTop,scrollHeight,clientTop,clientHeight,offsetTop,offsetHeight实际意义及计算方式附实例说明

一.滚动距离.高度 scrollTop scrollLeft scrollHeight scrollWidth 二.相对位置.距离 offsetTop offsetLeft offsetHeight offsetWidth 三.可视距离.宽高 clientTop clientLeft clientHeight clientWidth 四.坐标 event.clientX event.clientY event.pageX event.pageY event.offsetX event.offse

用scrollTop制作一个自动滚动公告栏

我们在浏览网页时,经常会看到会一些滚动的栏目,比如向上滚动的公告.新闻等.其实他们的制作都不难,只要学了基础的html.css.javascript就可以做出来,用JavaScript的scrollTop就行. scrollTop:返回或设置匹配元素的滚动条的垂直位置. <div id="div1" style="width:200px;height:200px;background-color:#999999;overflow:auto;background-colo

Javascript scrollTop 20大洋

花了20大洋,买了一个视频,这是读书笔记 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> b

浏览器对body节点scrollTop解析的差异

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> .box{border:1px solid pink; background:#eee; height:200px;} .box:hover{background:cyan;} .bg-pink{background:pink;} .h800{heig

js scrollTop, 滚动条操作

设置页面加载时滚动条自动滚到底的方法: jQuery: 复制代码代码如下: $(function(){ var h = $(document).height()-$(window).height(); $(document).scrollTop(h); }); JavaScript: 复制代码代码如下: window.onload = function(){ var h = document.documentElement.scrollHeight || document.body.scro

scrollTop如何实现click后页面过渡滚动到顶部

用JS操作,body元素的scrollTop var getTop = document.getElementById("get-top"); var head = document.getElementById("head"); getTop.onclick = function () { var time = setInterval(function () { document.body.scrollTop = document.body.scrollTop -

JS-scrollTop、scrollHeight、clientTop、clientHeight、offsetTop、offsetHeight的理解

scrollTop, 可写(这些属性中唯一一个可写的元素) Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数. 一个元素的 scrollTop 值是这个元素的顶部到视口可见内容(的顶部)的距离的度量.当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0. scrollTop 可以被设置为任何整数值,同时注意: 如果一个元素不能被滚动(例如,它没有溢出,或者这个元素有一个"non-scrollable"属性), scrollT

自己手写的自动完成js类

在web开发中,为了提高用户体验,会经常用到输入框的自动完成功能,不仅帮助用户进行快速输入,最重要的是帮助那些“记不全要输入什么”的用户进行选择.这个功能有很多插件已经实现了,为了适应项目的特殊需求,决定自己编写一个具备通用性.扩展性和灵活性的自动完成类,就当是边写边学习了,一举两得.该功能是比较简单的,核心是数据获取方式和导航的实现,简单写了一个,经测试非常好用,还有很多地方需要修改和改进,例如:在原型中只暴露init方法即可,其他方法都需要放到私有空间内,不让用户访问到,这个以后再完善吧.啥

Asp.NET MVC 使用 SignalR 实现推送功能二（Hubs 在线聊天室获取保存用户信息）

简单介绍关于SignalR的简单实用请参考 Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室) 在上一篇中,我们只是介绍了简单的消息推送,今天我们来修改一下,实现保存消息,历史消息和用户在线由于,我这是在一个项目([无私分享:从入门到精通ASP.NET MVC]从0开始,一起搭框架.做项目目录索引)的基础上做的,所以使用到的一些借口和数据表,不详细解析,只是介绍一下思路和实现方式,供大家参考用户登录注册信息当用户登录之后,我们注册一下用户的信息,我们

javascript 技巧总结积累（正在积累中）

1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 <input type="text" value="郭强" onfocus="if(value=='郭强') {value=''}" onblur="if (value=='') {value='郭强'}">点击时文字消

WebSocket介绍和一个简单的聊天室

WebSocket是什么呢? WebSocket一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket通信协议于2011年被IETF定为标准RFC 6455,并被RFC7936所补充规范,WebSocketAPI被W3C定为标准. WebSocket 是独立的.创建在 TCP 上的协议,和 HTTP 的唯一关联是使用 HTTP 协议的101状态码进行协议切换,使用的 TCP 端口是80,可以用于绕过大多数防火墙的限制. WebSocket 使得客户端和服务器之间的数据交换变得更加简单

scrolltop和scrollheight

热门专题