元素滚动Scroll系列

已于 2022-05-04 15:30:28 修改
阅读量185 收藏
点赞数
分类专栏： JS基础 文章标签： css3 css javascript
于 2022-05-04 15:13:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_69317131/article/details/124570648
版权

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

scroll系列属性作用
element.scrollTop返回被卷去的上侧距离，返回值不带单位
element.scrollLeft返回被卷去的左侧距离，返回值不带单位
element.scrollWidth返回自身实际的宽度，不含边框，返回值不带单位
element.scrollTop返回自身实际的高度，不含边框，返回值不带单位

页面被卷去的头部距离：window.pageYoffset

总结用法

 

不是你的波
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
页面元素焦点滚动效果
紧迫 focus 不要混！
03-21 610
_scroll() { // this.scrollIntoView(false) //滚动生硬 // this.scrollIntoView({behavior: "smooth", block: "center"}) //此方案滚动效果很好，但在低端安卓(4.x)上有兼容性问题,options不被识别，只识别true/false; ...
最新CSS3横向菜单的实现
业精于勤荒于嬉，行成于思毁于随
08-05 297
【代码】最新CSS3横向菜单的实现。
前端面试宝典【CSS篇】【5】
BDawn的专栏
08-06 44
CSS 选择器的优先级（也称为“特异性”或“specificity”）是指当多个 CSS 规则应用于同一个 HTML 元素时，哪个规则会被应用。CSS 的优先级机制确保了样式规则能够按照预期的方式生效。 在 CSS 中，一些属性是可以被子元素继承的，这意味着子元素会自动采用父元素的这些属性值。
【小技巧】CSS如何实现文字溢出显示省略号
qq_65034569的博客
08-03 304
是一种常见的文本截断技术，用于在文本内容超出其容器宽度时，提供一种视觉上的提示，表明文本已被截断。在列表项或者导航菜单中，经常会在列表项或导航菜单中，由于空间有限，当文本内容较长时，可以使用省略号显示文本已被截断。这个方法很多地方都会用到，我们可以直接复制下来，写在一个公共样式当中，下次直接使用类名即可(当然，文字省略了之后，也要得找个时机让他的文字完全显示的做法，只需要设置一个。方法非常简单，只需要添加以下👇三句话就可以实现啦🥳！伪类，让鼠标经过的时候显示全。设置不允许换行，强制文字一行显示。
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 134
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
纯css的loading效果
m0_59508634的博客
08-03 373
但通过vuex存储变量，sass进行全局css定义也可以实现，但仅仅适用于小项目使用量不大的情况。但需要注意的是没有办法实现全局注册，因为直接定义一个标签的话在sass里面可能会出现一些问题。其实在日常生活中我们可以采用纯css的组件方式实现loading 的效果。项目的借用的话可以借助状态变量使用v-show来实现在需要的时候进行显示。元素被绝对定位在其父元素的中心，并且其内部的文本大小和对行间距（在之前的文章里面实现loading组件的封装。）是响应式的，基于视口宽度（），该伪元素通过CSS动画（
【Dash】使用 HTML 和 CSS 创建图表
持续更新中...
08-03 1014
【代码】【Dash】使用 HTML 和 CSS 创建图表。
JS+CSS案例：用CSS+JS做漂亮的拟真时钟
最新发布
uu0216的博客
08-06 220
今天给大家分享一个挺酷的CSS+js模拟的时钟。
css实现文字根据条件渐变
m0_59508634的博客
08-03 274
body。
前端（HTML + CSS）学成在线项目（仿）
li3123537691的博客
08-06 261
头部区域 + banner区域 + 精品推荐区域，这三个区域都是版心居中。头部区域分为：logo + 导航 + 搜索 + 用户四个小块。banner区域分为：左侧导航 + 背景图 + 右侧课程表。HTML（index.html）代码。精品推荐课程区域（版心居中）鼠标悬停 :hover效果。鼠标悬停 :hover效果。鼠标悬停 :hover效果。数据分析师区域（版心居中）编程入门区域（版心居中）
css水波浪动画效果
米拉
08-06 214
【代码】css水波浪动画效果。
CSS技巧专栏：一日一例 19 -纯CSS实现超酷的水晶按钮特效
uu0216的博客
08-06 651
我们观察一下按钮动作，鼠标移动到按钮上时，发生了两个变化： 1.按钮本体向下滑动了几个像素。但按钮的高光没有动。 2.按钮下面的深色投影，在按钮向下移动的时候，阴影没有了。我们可以把按钮本体那个投影层的透明度降低看看效果：
CSS基础
qq_73792226的博客
08-06 424
【代码】CSS基础。
【Vue】RuoYi-Vue 若依 vue3 版本安装 tailwindcss 不生效问题
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
08-06 158
删除默认安装教程下的。
微信小程序css中配置了文字超出一行或两行则显示省略号对纯数字或纯字母或小数点无效的解决办法
番茄Salad
08-03 240
微信小程序css中配置了文字超出一行或两行则显示省略号对纯数字或纯字母或小数点无效的解决办法
CSS平面转换-旋转
瞉韩
08-03 623
transform: rotate(旋转角度);
css仿el-tabs标签页效果
请叫我欧皇！的博客
08-06 123
需求：el-tabs很多时候需要改间距或者下划线上还要加组件什么的比较麻烦，手写一个自己根据需求更改即可。
JavaWeb——CSS的使用
m0_50460160的博客
08-06 772
CSS 层叠样式表(英文全称:(cascading stle sheets)能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力,简单来说,CSS用来美化页面。通过设置块元素的float属性，可以使其保存块元素的特征的同时能够进行浮动，float属性的可取值为left，right以及none。元素的位置通过"left”,"top","right”以及"bottom"属性进行规定。生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
牛客JS题（二十一）数组扁平化
不起眼小菜菜的博客
08-04 805
注释很详细，直接上代码……
Springboot+Websocket+Security+Vue 实现弹幕推送功能
Gemini1995的博客
08-01 674
【代码】Springboot+Websocket+Security+Vue 实现弹幕推送功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值