JavaScript 元素滚动scroll
scroll翻译过来就是滚动的,我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。
scroll系列属性 | 作用 |
---|---|
element.scrollTop | 返回被卷去的上侧距离,返回数值不带单位 |
element.scrollLeft | 返回被卷去的左侧距离,返回数值不带单位 |
element.scrollWidth | 返回自身实际的宽度,不含边框,返回数值不带单位 |
element.scrollHeight | 返回自身实际的高度,不含边框,返回数值不带单位 |
如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为页面被卷去的头部。滚动条在滚动时会触发onscroll事件
案例:通过滚动改变侧边栏的定位方式
<body><div class="slider-bar"><span class="goBack">返回顶部</span></div><div class="header w">头部区域</div><div class="banner w">banner区域</div><div class="main w">主体部分</div><script>//1. 获取元素var sliderbar = document.querySelector('.slider-bar');var banner = document.querySelector('.banner');// banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面var bannerTop = banner.offsetTop// 当我们侧边栏固定定位之后应该变化的数值var sliderbarTop = sliderbar.offsetTop - bannerTop;// 获取main 主体元素var main = document.querySelector('.main');var goBack = document.querySelector('.goBack');var mainTop = main.offsetTop;// 2. 页面滚动事件 scrolldocument.addEventListener('scroll', function() {// console.log(11);// window.pageYOffset 页面被卷去的头部// console.log(window.pageYOffset);// 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位if (window.pageYOffset >= bannerTop) {sliderbar.style.position = 'fixed';sliderbar.style.top = sliderbarTop + 'px';} else {sliderbar.style.position = 'absolute';sliderbar.style.top = '300px';}// 4. 当我们页面滚动到main盒子,就显示 goback模块if (window.pageYOffset >= mainTop) {goBack.style.display = 'block';} else {goBack.style.display = 'none';}})</script>
</body>
JavaScript 元素滚动scroll相关推荐
- 05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...
- 31 元素滚动scroll系列
技术交流 QQ 群:1027579432,欢迎你的加入! 1.元素 scroll 系列属性 使用 scroll 系列的相关属性可以动态的得到该元素的大小.滚动距离等. 2.页面被卷去的头部 如果浏览器 ...
- 元素滚动 scroll 系列
文章目录 元素 scroll 系列属性 页面被卷去的头部 案例:淘宝固定右侧侧边栏 页面被卷去的头部兼容性解决方案 元素 scroll 系列属性 scroll 翻译过来就是滚动的,我们使用 scrol ...
- 元素滚动 scroll 与 scroll 事件
scroll 翻译过来就是滚动的意思,我们使用 scroll 的相关属性可以得到元素大小与滚动距离等等 scroll 的相关属性: element.scrollTop:返回滚动后被卷上去的距离,返回值 ...
- 22、scroll 元素滚动
22.scroll 元素滚动 1. scroll 概述 scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小.滚动距离等. 2. 页面被卷去的头部 如果浏 ...
- 借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海 #精选JAVASCRIPTCSSCHROMECSS3APPLE
一.iPhone X的刘海发型和衍生的交互 iPhone X造型上有个显著的特质,就是有个明显的刘海. 然后,也出现了一些酷酷的交互. 例如下面这个交互: 交互视频效果戳这里体验:http://t.c ...
- 借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海
一.iPhone X的刘海发型和衍生的交互 iPhone X造型上有个显著的特质,就是有个明显的刘海. 然后,也出现了一些酷酷的交互. 例如下面这个交互: 交互视频效果戳这里体验:http://t.c ...
- Javascript网页滚动方法
Javascript网页滚动方法 作者:不详 来源于:源码下载吧 发布时间:2007-6-6 16:24:26 [ 字体:大 中 小 ] 我想大家都看过各种各样的滚动(最常用的就是用在新闻的更新上 ...
- vue 点击div 获取位置_vue 点击元素滚动到指定位置
{{item}} {{item}} data() {return{ navgator: ['列表A','列表B','列表C','列表D', ], navgatorIndex:0, listBox: [ ...
最新文章
- 《3D数学基础》1.8 混合积
- 算法笔记-链相关、链的基础、单链双链环链、链的各种功能实现、链的算法题、面试题以及算法优化方法(多)、C#
- 洛谷——P1910 L国的战斗之间谍
- ue4缓存位置怎么改_怎么从蓝图节点跳转到C++源码?
- dynamodb java_使用Java扫描DynamoDB项目
- python-windows安装相关问题
- alm数据库mysql_mysql
- android手机分享app,Android Pie如何快捷分享文件至特定App
- (转)Spring boot(一):入门篇
- python3.7.3安装失败_python 3.7.3安装web.py报错解决方法
- 未了(endless)(【CCF】NOI Online 能力测试2 入门组第一题 )
- 手持式频谱仪帮助解决链路故障
- 软件测试面试过程中常见的问题
- 【亲自实践能够下载的谷歌地图切片url地址】谷歌地图数据下载的尝试以及Python爬虫实现
- 【时间管理】要事第一--时间管理四象限法
- 基于Opencv的人脸&姓名&表情&年龄&种族&性别识别系统(源码&教程)
- 安卓手机 ADB 操作指令
- c程序语言中long,C语言long
- ubuntu的一些安装设置
- 资料:SAP所有模块用户出口(User Exits)