元素滚动scroll系列

最新推荐文章于 2024-08-26 19:16:26 发布
最新推荐文章于 2024-08-26 19:16:26 发布
阅读量71 收藏
点赞数
分类专栏： 前端 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50730710/article/details/128562376
版权

使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。

element.scrollTop  返回被卷去的上侧距离，返回数值不带单位

element.scrollLeft  返回被卷去的左侧距离，返回数值不带单位

element.scrollWidth  返回自身实际的宽度，不含边框，返回数值不带单位

element.scrollHeight  返回自身实际的高度，不含边框，返回数值不带单位

小白不解
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
元素滚动 scroll 系列
十八岁讨厌编程的博客
03-31 1181
文章目录元素 scroll 系列属性页面被卷去的头部案例：淘宝固定右侧侧边栏页面被卷去的头部兼容性解决方案 元素 scroll 系列属性 scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 页面被卷去的头部 如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件 我们可以拿以下代码进行实验： <style
元素滚动Scroll系列
weixin_69317131的博客
05-04 198
scroll系列的相关属性可以动态的得到该元素的大小、滚动距离 scroll系列属性 作用 element.scrollTop 返回被卷去的上侧距离，返回值不带单位 element.scrollLeft 返回被卷去的左侧距离，返回值不带单位 element.scrollWidth 返回自身实际的宽度，不含边框，返回值不带单位 element.scrollTop 返回自身实际的高度，不含边框，返回值不带单位 页面被卷去的头部距离：window.pageYof
元素滚动 scroll系列
makemoreefforts的博客
03-17 156
scroll 系列 <style> div { width: 200px; height: 200px; background-color: pink; border: 10px solid red; padding: 10px; /* 添加滚动条 */ overflow: auto; }
JavaScript - 元素滚动scroll系列
qq_33962481的博客
06-30 606
文章目录一、scroll二、scroll属性二、scroll事件 一、scroll scroll 相关属性可以动态的得到该元素的大小, 滚动距离等. 二、scroll属性 element.scrollTop : 返回被卷去的上侧距离 element.scrollLeft : 返回被卷去的左侧距离 element.scrollWidth : 返回自身实际的宽度. 不含边框 element.scrollHeight : 返回自身实际的高度, 不含边框. 二、scroll事件 在这里插入代码片 ...
31 元素滚动scroll系列
CurryCoder的个人博客
05-30 318
技术交流 QQ 群:1027579432，欢迎你的加入！ 1.元素 scroll 系列属性 使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 2.页面被卷去的头部 如果浏览器的高(或宽)度不足以显示整个页面时，会出现滚动条。当滚动条向下滚动时，页面上面会被隐藏掉的高度，就称为页面被卷去的头部。滚动条在滚动时触发 onscroll 事件。 3.仿淘宝固定右侧侧边栏案例 功能需求： 原先侧边栏是绝对定位； 当页面滚动到一定位置时，侧边栏改为固定定位； 页面继续滚动，会让
Javascript【元素偏移量 offset 系列、元素滚动 scroll 系列】
m0_52896752的博客
10-28 740
Javascript【元素偏移量 offset 系列、元素滚动 scroll 系列】
元素可视区client系列和元素滚动 scroll 系列
JJ_Smilewang的博客
06-22 264
client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。注意：client 宽度/高度 和 offset 宽度/高度 最大的区别是它不包括边框。scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头
元素滚动scroll系列（附实例、图解）
weixin_45135068的博客
08-04 2836
元素滚动scroll系列属性 scroll翻译过来就是滚动，我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。 属性详解 element.scrollTop 返回被卷去的上侧距离，返回数值不带单位 element.scrollLeft 返回被卷去的左侧距离，返回数值不带单位 element.scrollWidth 返回自身实际宽度，不含边框，返回数值不带单位 element.scrollHeight 返回自身实际高度，不含边框，返回数值不带单位 页面被卷去的头.
（5）元素滚动scroll系列、scroll事件、侧边栏案例
weixin_59598992的博客
01-24 2956
scroll翻译过来就是滚动的，我们使用scroll相关系列的属性可以动态的得到该元素的大下，滚动距离等。 element.scrollTop 返回被卷去的上侧距离（有滚动条时，下滑上侧内容会被卷去），返回数值不带单位 element.scrollLeft 返回被卷上的左侧距离，返回数值不带单位 element.scrollWidth 返回自身实际的宽度，不含边框，返回数值不带单位 element.scrollHeight 返回自身实际的高度，不含边框，返回数值不带单位
WebAPI第四天学习总结—— 元素滚动 scroll 系列
weixin_52819925的博客
08-18 164
元素滚动 scroll 系列 scroll 概述 scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 scroll系列常用属性 scroll系列属性 作用 element.scrollTop 返回被卷去的上侧距离，返回数值不带单位 element.scrollLeft 返回被卷去的左侧距离，返回数值不带单位 element.scrollWidth 返回自身实际的宽度，不含边框，包含padding，返回数值不带单位 el
PC端网页特效 | 元素可视区 client 系列 + 元素滚动 scroll 系列 + mouseenter 和mouseover的区别 + 动画函数封装
不爱吃菜的菜菜的博客
05-18 371
client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 <script> // client 宽度 和我们offsetWdith 最大的区别就是不包含 边框 var div = document.querySelector('div'); console.log(div.clientWidth); .
JavaScript——元素可视区client系列&元素滚动scroll 系列
shhghvvh的博客
12-02 342
scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。
WebAPIs-元素偏移量offset系列、元素可视区client系列、元素滚动scroll系列、动画函数封装，建议收藏！
解启超
02-19 239
Web APIs 学习目标: 能够说出常见 offset 系列属性的作用 能够说出常见 client 系列属性的作用 能够说出常见 scroll 系列属性的作用 能够封装简单动画函数 1.1. 元素偏移量 offset 系列 1.1.1 offset 概述 offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定...
JS学习笔记---17 PC端网页特效-4、元素滚动 scroll 系列
weixin_51744858的博客
08-20 243
4、元素滚动 scroll 系列 4.1、元素 scroll 系列属性 scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 scroll 系列属性 作用 element.scrollTop 返回被卷去的上侧距离，返回数值不带单位 element.scrollLeft 返回被卷去的左侧距离，返回数值不带单位 element.scrollWidth 返回自身实际的宽度（实际内容，内容超出也计算在内），不含边框，包含paddin
CSS中禁用DOM事件
bingmoujs的博客
08-26 250
表示元素不应对鼠标事件进行响应。这包括鼠标的点击、悬停和其他鼠标相关的动作。这个属性指定当鼠标指针设备（如鼠标）在元素上时，事件应该有什么表现。
前端面试宝典【CSS篇】【8】
BDawn的专栏
08-26 13
绝对单位 适用于不需要缩放的场合，如打印样式。 相对单位 更适合Web设计，尤其是响应式设计。 vw/vh 适用于基于视口尺寸的布局设计。 em/rem 适用于字体大小相关的布局。
CSS的动画效果
最新发布
weixin_71949204的博客
08-26 153
3、以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。2、创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，能够多次改变这套 CSS 样式。5、在CSS样式中，用animation属性来应用 @keyframes所定义的动画。语法： 创建动画：@keyframes 调用动画：animation。1、通过 @keyframes(关键帧动画) 规则，您能够创建动画。
CSS 知识点及使用案例
2301_78319341的博客
08-26 438
css快速入门
新手指南：小程序scroll-view隐藏滚动条与页面跳转详解
在面向新手的《二十》系列教程中，本文重点讲解了如何在微信小程序中使用`scroll-view`组件实现滚动区域隐藏滚动条，并介绍了一种简洁的方法来控制页面跳转。首先，对于滚动条的隐藏，作者提供了一个实例展示： 1. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值