35.滚动 scroll
目录
1 返回自身宽度 element.scrollWidth
2 返回自身高度 element.scrollHeight
3 sroll返回自身尺寸与client返回自身尺寸的区别
4 被卷去的上侧距离 element.scrollTop
5 被卷去的左侧距离 element.scrollLeft
6 模仿淘宝侧边栏
7 页面移动到指定位置 window.scroll(x,y)
8 页面被卷去的上侧距离 window.pageYOffset
9 页面被卷去的左侧距离 window.pageXOffset
scroll与滚动条相关,主要有下面几个属性
与其他大小属性的区别如下
1 返回自身宽度 element.scrollWidth
scrollWidth返回的数值中包含padding,但不包含border与margin。scrollWidth返回的结果没有单位
- 123 = 103 + 10 * 2
2 返回自身高度 element.scrollHeight
scrollHeight返回的数值中包含padding,但不包含border与margin。scrollHeight返回的结果没有单位
- 186 = 166 + 10 * 2
3 sroll返回自身尺寸与client返回自身尺寸的区别
盒子中的内容超出了盒子本身尺寸的时候,scroll是按照内容走的,client不管内容只按照盒子原来的尺寸走
宽度如果超出和高度一样
4 被卷去的上侧距离 element.scrollTop
下面图的红色框子是div盒子的可视区域
把滚动条搞出来后,搞一个按钮进行监测
没滚动的时候是0
5 被卷去的左侧距离 element.scrollLeft
我们将div中的内容设置为不换行,然后搞个按钮监测
6 模仿淘宝侧边栏
打开之后的侧边栏是这样的
当滚到一定程度后会增加一个会顶部
代码是这样的
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {height:3000px;background-color: rgb(232,226,224);}.alongside {position: fixed;top: 50%;right:0px;transform: translate(0,-50%);width:80px;background-color: white;border-radius: 20px 0px 0px 20px;}div {height:60px;display:flex;flex-direction: column;align-items: center;font-size: 12px;padding:5px;}.return_top {display:none;}</style>
</head>
<body><section class="alongside"><div><img src="data:images/官方客服.png" alt=""><span>官方客服</span></div><div><img src="data:images/反馈.png" alt=""><span>反馈</span></div><div><img src="data:images/举报.png" alt=""><span>举报</span></div><div class="return_top"><img src="data:images/回顶部.png" alt=""><span>回顶部</span></div></section>
</body>
<script>return_top = document.querySelector('.return_top')document.body.onscroll = function() {console.log(document.documentElement.scrollTop)if (document.documentElement.scrollTop > 500) {return_top.style.display = 'flex';}else {return_top.style.display = 'none';}}
</script>
</html>
打开后是这样的
滚动到一定的位置回出现回顶部
再滚到上面,回顶部消失
上面代码中使用了 document.documentElement,scrollTop 来获取页面滚动的上侧距离,除此之外还有另外两种方式
DTD是我们html最开始的这句话
可以搞一个照顾兼容性的函数,不过我觉得基本不会用到
7 页面移动到指定位置 window.scroll(x,y)
x,y是要移动到的页面位置左上角点
我们上面没对回顶部设置任何动作,现在我们对其设置点击一下回到顶部
- 注意scroll的两个参数不加单位
打开页面后我们把 回顶部 滚出来
然后点击回顶部,发现可以回到顶部
8 页面被卷去的上侧距离 window.pageYOffset
9 页面被卷去的左侧距离 window.pageXOffset
35.滚动 scroll相关推荐
- 05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...
- 31 元素滚动scroll系列
技术交流 QQ 群:1027579432,欢迎你的加入! 1.元素 scroll 系列属性 使用 scroll 系列的相关属性可以动态的得到该元素的大小.滚动距离等. 2.页面被卷去的头部 如果浏览器 ...
- 高性能滚动scroll(防抖和节流)
滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件. var i = 0;window.addEventListener('scr ...
- 高性能滚动 scroll 及页面渲染优化
最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...
- 元素滚动 scroll 系列
文章目录 元素 scroll 系列属性 页面被卷去的头部 案例:淘宝固定右侧侧边栏 页面被卷去的头部兼容性解决方案 元素 scroll 系列属性 scroll 翻译过来就是滚动的,我们使用 scrol ...
- 元素滚动 scroll 与 scroll 事件
scroll 翻译过来就是滚动的意思,我们使用 scroll 的相关属性可以得到元素大小与滚动距离等等 scroll 的相关属性: element.scrollTop:返回滚动后被卷上去的距离,返回值 ...
- JavaScript 元素滚动scroll
scroll翻译过来就是滚动的,我们使用scroll系列的相关属性可以动态的得到该元素的大小.滚动距离等. scroll系列属性 作用 element.scrollTop 返回被卷去的上侧距离,返回数 ...
- 关于滑动条滚动 scroll兼容
Ie浏览器上必须写$(window) <script type="text/javascript"> $(function(){ $(window).scroll(fu ...
- 微信小程序横向(scroll x)滚动 scroll view
scroll-view 可滚动视图区域. scroll-x="true"
最新文章
- 实用jQuery代码段
- 为什么叫python编程-月薪上万的Python编程,为什么你还没入门就放弃了?
- 解决 json_encode 中文乱码
- Linux/Unix the definition of cpu-nice
- asp.net报错“尝试读取或写入受保护的内存。这通常指示其他内存已损坏”的解决办法...
- 有哪些大数据处理工具?
- PHP连接Mysql数据实现增上改查
- 嵌入式linux系统文件,嵌入式Linux文件系统知多少
- 腾讯,创新工场,淘宝等公司最新面试三十题(第171-200题)
- Python标准库中的shutil
- html新标准,HTML 5新标准将会在2022年正式发布
- 手机号归属地区编码_Excel隐藏手机号中间4位的6种方法,你见过几种?
- 华硕主板开机:loading asus express gate解决办法
- 大数乘法与大数加法 java实现
- CentOS7上实现Squid缓存服务器的两种模式
- 集成电路设计-读书笔记(一)
- 用于Red Hat Enterprise Linux 6 (AMD64/EM64T)的HP智能阵列B140i SATA RAID控制器驱动程序 下载该文件即表示您同意惠普软件许可协议的条款和条件。
- http状态码为499的解决办法
- linux 电脑观看电视,使用Zattoo在您的Ubuntu桌面上观看直播电视
- 拼接、比较与计算——哥德尔读后之十四