开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

html正文滚动条位置

HTML正文滚动条位置是指在网页中，正文内容超出可视区域时，出现的滚动条所处的位置。滚动条的位置可以通过JavaScript来获取和设置。

在HTML中，可以使用document.documentElement.scrollTop属性来获取或设置滚动条的垂直位置。该属性返回一个表示滚动条顶部与可视区域顶部之间的距离的值。如果滚动条位于顶部，则该值为0。

以下是一个示例代码，演示如何获取和设置HTML正文滚动条位置：

<!DOCTYPE html>
<html>
<head>
  <style>
    #content {
      height: 2000px; /* 超出可视区域的内容 */
    }
  </style>
</head>
<body>
  <div id="content">
    <!-- 正文内容 -->
  </div>

  <script>
    // 获取滚动条位置
    var scrollTop = document.documentElement.scrollTop;
    console.log("滚动条位置：" + scrollTop);

    // 设置滚动条位置
    document.documentElement.scrollTop = 500; // 将滚动条位置设置为500像素
  </script>
</body>
</html>

在实际应用中，HTML正文滚动条位置的获取和设置可以用于实现一些特定的交互效果，例如当滚动条位置达到某个阈值时触发某些动画效果，或者通过设置滚动条位置来实现页面的平滑滚动等。

腾讯云相关产品中，与HTML正文滚动条位置相关的产品和服务可能包括云服务器、云函数、云存储等。具体的产品选择和使用可以根据实际需求进行评估和决策。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

网页正文全文高：document.body.scrollHeight 网页可见区域高（包括边线的高）：document.body.offsetHeight 网页被卷去的高：document.body.scrollTop

03

修复一个因为 scrollbar 占据空间导致的 bug

这一个因为滚动条占据空间引起的bug, 查了一下资料，最后也解决了，顺便研究一下这个属性，做一下总结，分享给大家看看。

02

scrollWidth,clientWidth,offsetWidth的区别

网页可见区域宽：document.body.clientWidth; 网页可见区域高：document.body.clientHeight; 网页可见区域高：document.body.offsetWeight: 网页可见区域高：document.body.offsetHeight; 网页正文全文宽：document.body.scrollWidth; 网页正文全文高：document.body.scrollHeight; 网页被卷去的高：document.body.scrollTop; 网页被卷去的左：document.body.scrollLeft; 网页正文部分上：window.screenTop; 网页正文部分左：window.screenLeft; 屏幕分辨率的高：window.screen.height; 屏幕分辨率的宽：window.screen.width; 屏幕可用工作区高度：window.screen.availHeight; 屏幕可用工作区宽度：window.screen.availWidth;

02

浏览器中的几个高度

载入首批数据，文档高度（ $('html').height() == 2500px ）

02

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」

在我本地测试当中：在IE、FireFox、Opera下都可以使用 document.body.clientWidth document.body.clientHeight 即可获得，很简单，很方便。而在公司项目当中： Opera仍然使用 document.body.clientWidth document.body.clientHeight 可是IE和FireFox则使用 document.documentElement.clientWidth document.documentElement.clientHeight 原来是W3C的标准在作怪啊

02

offsetWidth,clientWidth的区别

包括元素的宽度、可见的垂直滚动条宽度、左边框高度和右边框高度

02

javascript中各种计算位置高度的方法

网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的高宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： document.body.scrollHeight; 网页被卷去的高： document.body.scrollTop; 网页被卷去的左： document.body.scrollLeft; 网页正文部分上： window.screenTop; 网页正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的宽： window.screen.width; 屏幕可用工作区高度： window.screen.availHeight; 屏幕可用工作区宽度：window.screen.availWidth; scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

02

博客园【装饰目录、回到顶部】

前言 1、进入你的博客园点击： image.png 2、然后跳转到下图： image.png 申请JS 首先你要去自己的设置,申请js权限 image.png 申请成功以后才可以做一下内容目录页首HTML代码 <script type="text/javascript"> /* 功能：生成博客目录的JS工具测试：IE8，火狐，google测试通过孤傲苍狼 2014-5-11 */ var BlogDirectory = { /* 获取元素

01

利用本地存储，记录滚动条的位置

在一定时间范围内，用手机微信打开之前浏览过的订阅号的文章，文章显示出来的是你上次阅读到的位置，而不是从头开始显示。手机微信是怎么知道你文章阅读的位置？前端工程师能否实现该功能？本文主要内容： 1、功能介绍 2、功能分析 3、知识要点 4、具体实现 5、总结 1、功能介绍为了让大家更清楚的知道今天要学习的效果，先一起来体验一下吧。我们先在手机微信打开HTML5学堂订阅号中的文章，当文章浏览到某一个位置的时候点击左上角返回，然后再次点击刚刚浏览过的那篇文章，显示出来的是你刚才阅读到的位置，而不是从头开始显示

07

随心所欲的滚动条，远离产品汪（一）

在我们的开发生活中，相信很多人都会遇到形形色色的项目需求，比如更改浏览器的默认样式，在产品定下需求后给的网页设计图中我们最常遇到的是自定义滚动条的样式，或者当你想构建一个很有特色和创意的网页，那么也肯

05

JS滑动滚动的n种方式

scrollIntoView对页面元素调用，会滚动元素的父容器，将该元素滚动到浏览器的可视区域

01

博客园_01_为博客园添加目录的方法总结

本文转自：作者：妙音天女地址：http://www.cnblogs.com/xuehaoyue/p/6650533.html

02

为博客园添加目录的方法总结

参考链接： http://www.cnblogs.com/xdp-gacl/p/3718879.html#2937655 http://www.cnblogs.com/zzqcn/p/4657124.html http://www.cnblogs.com/jiangz/p/3734968.html

02

【Flutter实战】自定义滚动条

魏文帝曹丕（187年－226年6月29日），字子桓，沛国谯县（今属安徽亳州）人。三国时期曹魏开国皇帝，曹操和卞夫人的嫡长子，之后继承父亲的魏王封号与丞相的大权，最终东汉皇帝汉献帝禅让于其，曹丕登基后改国号为魏，史称曹魏，226年驾崩，谥文皇帝。

01

clientHeight、scrollHeight、offsetHeight和scrollTop之间区别[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。屏幕可见区域高（内容的可视高度，不包括边框，边距或滚动条）：document.body.clientHeight 正文内容高（整个元素的高度，包括带滚动条的隐蔽的地方）：document.body.scrollHeight 内容高+padding+边框：document.body.offsetHeight 滚动条已经滚动的高度：document.body.scrollTop

02

博客园美化博客随笔目录

博客园美化博客随笔目录基于孤傲苍狼在2014-5-11写的目录代码基础上进行改进一.js代码 <script type="text/javascript"> var BlogDirectory = { /* 获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top） */ getElementPosition:function (ele) { var topPosition = 0;

03

如何使用 CSS 设置和自定义水平和垂直滚动条

滚动条是图形用户界面（UI）中必不可少的组件。滚动条允许用户查看超出其容器宽度或高度的内容。滚动条还使用户能够查看超出屏幕宽度或高度的内容。默认情况下，浏览器会为body内容的溢出包含一个滚动条。在其他情况下，UI开发人员必须设置滚动条以使用户能够查看超出屏幕或特定容器的内容。每个浏览器都有一组默认的滚动条样式。在某些情况下，您可能有充分的理由来定制滚动条。例如，您可以定制滚动条样式以匹配网站的外观和感觉。

00

SCrollTOP scrollHeight

jQuery 里和滚动条有关的概念很多，但是有三个属性和滚动条的拖动有关，就是：scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性，互联网上几乎搜素不到关于它的应用技巧，而我正好需要用到它。

02

JQuery Div scrollTop ScrollHeight

jQuery 里和滚动条有关的概念很多，但是有三个属性和滚动条的拖动有关，就是：scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性，互联网上几乎搜素不到关于它的应用技巧，而我正好需要用到它。

01

jQuery实现图片懒加载

一、懒加载 1.什么是懒加载目前，网络上各大论坛，尤其是一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度。 2.懒加载的原理页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，

02

html5简单拖拽实现自动左右贴边+幸运大转盘

此篇文章主要实现两个功能： 1、点击屏幕下方签到悬浮按钮； 2、弹出幸运大转盘，转盘抽奖签到效果如图：在网上找了很多移动端拖拽的js实现方式，大部分都是这一种，html5的touch事件，但是

05

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

本文介绍了在HTML元素中分别使用clientHeight、offsetHeight、scrollHeight、offsetTop和scrollTop这五个属性，并分析了它们之间的关系以及在出现滚动条时的作用。

05

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性，单凭单词很难搞清楚分别代表什么意思之间有什么区别。通过阅读它们的文档总结出规律如下：

03

用canvas画了个table，手写滚动条

在之前业务有幸接触过复杂的大数据业务渲染，所用的table居然是用canvas以及虚拟列表的方式实现，也有看到飞书的统计信息表就是canvas绘制，一直没太明白为什么要用canvas去做，今天记录一下如何用canvas绘制一个table的简易版，希望看完在项目中能带来一些思考和帮助。

02

js、jQuery 获取文档、窗口、元素的各种值

浏览器当前窗口文档body的宽度： document.body.clientWidth;(仅仅是body的width) 浏览器当前窗口文档body的高度： document.body.clientHeight;(仅仅是body的height)

03

一文搞懂 JavaScript 中 DOM 相关的距离

刚开始学 DOM 操作中对于元素距离元素的距离问题总是迷迷糊糊的，虽然有万能的 getCurrentStyle 方式来取得所需要的属性，但是有时看别人的代码的时候，总会遇到很多简写的方式，或者有的时候为了简洁，关键字的方式更加合适，但是要求我们对这些属性的区别要特别清楚。

03

Js窗体window大小设置（转）

网页可见区域宽：document.body.offsetWidth (包括边线的宽)

02

CSS3自定义滚动条样式 -webkit-scrollbar

webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。

02

随心所欲的滚动条，远离产品汪（二）

还记得上周咱们说的“随心所欲滚动条，远离产品汪”一文吗？当中介绍了自定义滚动条的基本原理与实现方法，在自定义滚动条实现后，可以通过对滚动条的上下拖动来控制内容区的显示，使用过的朋友会发现，如果对篇幅较长的内容来说，不停的拖动滚动条来查看内容，还是比较麻烦的，于是本文在上篇代码的基础上添加了滚轮事件并处理了相应的兼容问题。本文内容 1、原理结构图 2、滚轮事件及兼容问题概要 3、具体实现步骤 4、小结原理结构图为了方便大家熟悉理解，希望大家能够回顾下上篇“随心所欲滚动条，远离产品汪（一）”，本文继续使用

08

DOM 和 BOM 中的各种宽高属性

window.innerHeight/window.innerWidth: 返回表示窗口的内部高度/宽度的数字。不包括开发者工具、顶部栏、侧边栏、滚动条、边框等不由 HTML 控制的部分

01

Threejs入门之二十二：Threejs中的屏幕坐标转标准设备坐标

在上一节中，我们在监听鼠标移动事件时，将其坐标范围处理为了[-1,1]的范围，使用如下代码

01

《从案例中学习JavaScript》之实现网页版阅读器

序现在手机上的文本阅读app已经非常丰富，良好的阅读体验与海量的书库常常令我感到无比兴奋。我想到8年前用一点几寸屏幕的mp3看电子书的情景，顿生一种淡淡的温馨。再久远一些，小的时候，我也经常和小伙伴们组团去书店看白书，也就是白看书。古老的木质书架上那一叠叠厚重的黄皮小说书，在年幼的我眼里仿佛是比盘子里的午餐肉更加美味可口的东西。而在当今这个信息化的时代，看书变得空前的便利，可是儿时那种期待和兴奋的感受却消失在了时间的长河。岁月在流逝，时代在进步。愿放下所有的浮躁，在新的时代愉快地生活，无所谓明天怎

06

CSS深入理解学习笔记之overflow

1、Overflow基本属性　　overflow:visible(默认)/hidden/scroll/auto/inherit; 　　visible：超出部分可见。　　hidden：超出部分隐藏。　　scroll：超出可滚动。　　auto：若超出才出现滚动条。　　inherit：继承。（IE8+）　　注：overflow-x与overflow-y值不同，其中一个属性值被赋予visible，而另一个被赋值为hidden/scroll/auto，则visible会被重置为auto。兼容性：

05

Div滚动条定位设置「建议收藏」

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/157990.html原文链接：https://javaforall.cn

04

Android ListView滚动条配置完全解析

可以看到在设置了Track之后在右侧滚动条下面出现一个贯穿整个ListView可见区域的红色线条。所以Track表示的是滚动条滑动时的”轨道”。

02

jquery操作元素的位置

.offset() 　　在匹配的元素中，获取第一个元素的当前坐标，或设置每一个元素的坐标，坐标相对于文档。　　.offset() 这个不接受任何参数。　　　　var offset = p.offset(); //获取到这个元素的位置　　　　　　p.html( "left: " + offset.left + ", top: " + offset.top ); .offset.left 元素距左面的距离 .offset

06

Selenium4+Python3系列（九） - 上传文件及滚动条操作

上传文件是每个做自动化测试同学都会遇到，而且可以说是面试必考的问题，标准控件我们一般用send_keys()就能完成上传，但是我们的测试网站的上传控件一般为自己封装的，用传统的上传已经不好用了，也就是说用selenium的APi已经无法完成上传操作了。那么下面，针对控件进行分类进行演示：

01

div滚动条

overflower：auto（内容溢出的时候出现滚动条；scroll会一直出现滚动条）

01

css笔记 - 张鑫旭css课程笔记之 overflow 篇

如果overflow-x、overflow-y的值相同，则等同于overflow设置了这个值。

01

css增加横着滚动条_CSS 设置滚动条样式的实现「建议收藏」

1、scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。

02

Selenium 处理滚动条

当页面上的元素超过一屏后，想操作屏幕下方的元素，是不能直接定位到，会报元素不可见的。这时候需要借助滚动条来拖动屏幕，使被操作的元素显示在当前的屏幕上。滚动条是无法直接用定位工具来定位的。selenium 里面也没有直接的方法去控制滚动条，这时候只能借助 J 了，还好 selenium 提供了一个操作 js 的方法:execute_script()，可以直接执行 js 的脚本

03

JavaScript与jQuery获取元素的宽、高和位置

今天汇总整理了 JavaScript 和 jQuery 获取元素宽高和位置的方法，比较全面，方便自己和需要并搜到此文章的朋友们查看。

00

js点击按钮返回页面顶部

在进行官网一类的网站建设时，经常会出现页面太长的现象，当用户滚动滚动条到最底部时返回顶部需要滚动多下滚动条，用户体验相当不好，于是就出现了当滚动条滚动到一定位置后出现返回顶部按钮，点击该按钮返回顶部，并且有一定的效果。

01

CSS设置浏览器滚动条样式及隐藏滚动条

虽然大多数人不会关注到滚动条的样式，但是有一些网站还是对滚动条进行了优化，比如网易邮箱。我们可以用 CSS 来设置浏览器的滚动条样式，下面整理一下 CSS 滚动条的几个属性及代表的意思。

04

JavaScript DOM元素尺寸和位置

三大点： 1.获取元素CSS大小 2.获取元素实际大小 3.获取元素周边大小一．获取元素CSS大小 1.通过style内联获取元素的大小 var box = document.getElementById('box');//获取元素 box.style.width;//200px、空 box.style.height;//200px、空 PS：style获取只能获取到行内style属性的CSS样式中的宽和高，如果有获取；如果没有则返回空。 2.通过计算获取元素的大小 var style = windo

07

event兼容,clientX,pageX,offsetX和screenX的区别

3.event兼容,clientX,pageX,offsetX和screenX的区别，图片移动。例 3.1：event兼容,clientX,offsetX和screenX的区别，图片移动。 clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 pageX：参照点也是浏览器内容区域的左上角，但它包括滚动条，即不会随着滚动条而变动 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。包括滚动条。 screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。马克-to-win：做实验时，可以选择四个地点，一个是窗口最左边，一个就是有字的最左边，最后一个选择窗口的最右边。这时出现滚动条，按右箭头到头，点击，你会发现区别。 <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    acdsacdaddscsavfdvdfavvavdav
    acdsacdaddscsavfdvdfavvavdav
    acdsacdaddscsavfdvdfavvavdav
    acdsacdaddscsavfdvdfavvavdav
    acdsacdaddscsavfdvdfavvavdav
    acdsacdaddscsavfdvdfavvavdav
    acdsacdaddscsavfdvdfavvavdav
    acdsacdaddscsavfdvdfavvavdav
    acdsacdaddscsavfdvdfavvavdav
    acdsacdaddscsavfdvdfavvavdav

<script> var car = document.getElementById("img"); function move(event) { var event = event || window.event; /*clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。马克-to-win：做实验时，可以选择三个地点，一个是窗口最左边，一个就是有字的最左边，最后一个选择窗口的最右边。 */

02

html多媒体

<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"></embed>

03

详解DOM对象中clientWidth、offsetWidth等属性

我们有时需要获得鼠标在某盒子中的位置，或者是随意移动某盒子的位置，在这些场景中我们可能经常需要用到clientWidth、offsetWidth、offsetTop啊等等。但是对于初学者来说（包括我），看到这些就头疼，因为感觉意思都相近，但作用却不同，所以今天天我就来捋一捋，搞清楚，后面好干活。好吧，废话不多说，开始吧。

02

【CSS】固定定位 ( 固定定位概念语法 | 固定定位 = 浏览器可视窗口 + 边偏移 | 代码示例 )

固定定位是固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ;

02

操作滚动条小结：scrollIntoView/animate等方法的来龙去脉

操作滚动条可以通过锚点跳转，JS操作滚动条，与scrollIntoView等方法。对此，我来考古一下。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭