js学习总结----浏览器滚动条卷去的高度scrolltop
1、之前我们学习的JS盒子模型中:client系列/offset系列/scrollWidth/scrollHeight都是“只读”的属性-> 只能通过属性获取值,不能通过属性修改元素的样式
2、scrollTop/scrollLeft:滚动条卷去的高度/宽度(这两个属性是唯一“可读写”的属性)
box.scrollTop = 0 // 直接回到容器的顶部
我们的scrollTop的值是存在边界值(最大和最小值),我们设置的值比最小值小或者比最大值大都没用,起到效果的依然是边界的值
[最小值是零]
box.scrollTop = -1000;// 直接回到了容器的顶部,没有超出
console.log(box.scrollTop) //0
[最大值 = 真实的高度-当前容器一屏幕的高度]
var maxTop = box.scrollHeight - box.clientHeight;
scrollTop最经典的应用就是回到顶部,下面代码如下:
1、之前我们学习的JS盒子模型中:client系列/offset系列/scrollWidth/scrollHeight都是“只读”的属性-> 只能通过属性获取值,不能通过属性修改元素的样式2、scrollTop/scrollLeft:滚动条卷去的高度/宽度(这两个属性是唯一“可读写”的属性)box.scrollTop = 0 // 直接回到容器的顶部 我们的scrollTop的值是存在边界值(最大和最小值),我们设置的值比最小值小或者比最大值大都没用,起到效果的依然是边界的值[最小值是零]box.scrollTop = -1000;// 直接回到了容器的顶部,没有超出 console.log(box.scrollTop) //0 [最大值 = 真实的高度-当前容器一屏幕的高度]var maxTop = box.scrollHeight - box.clientHeight;scrollTop最经典的应用就是回到顶部,下面代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{padding:0;margin:0;}html,body{width:100%;height:1000%;background:#11c900;}a{text-decoration: none;color:#000;}</style> </head> <body> <a href="javascript:" id="goLink">GO</a> //A标签本身是跳转页面的,把跳转的地址写在href这个属性中 /*1)、不写值的话是刷新本页面2)、写的如果是#target,是锚点定位,定位到当前页面Id为target这个位置3)、“javascript:”这样写是取消A标签默认跳转的行为 */ <script>var goLink =document.getElementById("goLink");/*回到顶部:总时间(duration):500ms 频率(interval):多长时间走一步 10ms 总距离(target): 当前的位置(当前的scrollTop)- 目标的位置(0)步长(step):每一次走得距离 (target/duration)*interval *//*这个代码是可以优化的:开始GO按钮是不显示的,当滚动到一定的距离之后,才显示,反之隐藏 只要浏览器的滚动条在滚动,我们就需要判断GO显示还是隐藏浏览器的滚动条滚动:拖动滚动条、鼠标滚轮、键盘上下键、pageDown/pageUp键、点击滚动条的空白区域或者箭头(自主操作的行为)...我们还可以通过js控制scrollTop的值来实现滚动条的滚动*/window.onscroll = function computedDisplay(){//不管怎么操作的,只要滚动条动了就会触发这个行为var curTop = document.documentElement.scrollTop || document.body.scrollTop;var curHeight = document.documentElement.clientHeight || document.body.clientHeight;if(curTop>=clientHeight){goLink.style.display = "block"}else{goLink.style.display = "none"}}goLink.onclick = function(){this.style.display = "none";//并不会消失,因为我们滚动条往回走的时候 又会触发onscroll事件,又会进行显示window.onscroll = null;var duration = 500,interval=10,target=document.documentElement.scrollTop || document.body.scrollTop;var step = (target/duration)*interval;var timer = window.setInterval(function(){var curTop = document.documentElement.scrollTop || document.body.scrollTop;if(curTop===0){window.clearInterval(timer);window.onscroll = computedDisplay;//当动画结束后把对应的方法重新绑定给window.onscrollreturn;}curTop-=stepdocument.documentElement.scrollTop = curTop;document.body.scrollTop = curTop;},interval)// document.documentElement.scrollTop = 0;// document.body.scrollTop = 0; } </script> </body> </html>
转载于:https://www.cnblogs.com/diasa-fly/p/7124105.html
js学习总结----浏览器滚动条卷去的高度scrolltop相关推荐
- dom元素滚动条高度 js_js浏览器滚动条卷去的高度scrolltop(实例讲解)
1.之前我们学习的JS盒子模型中:client系列/offset系列/scrollWidth/scrollHeight都是"只读"的属性-> 只能通过属性获取值,不能通过属性 ...
- BOM 浏览器窗口尺寸 浏览器的弹出层 浏览器的地址栏 浏览器的历史记录 浏览器的版本信息 浏览器的常见事件 浏览器卷去的高度和宽度
浏览器窗口尺寸 + 指的是浏览器可视窗口的尺寸 + 浏览器可能会出现滚动条=> 在一般浏览器中,滚动条算浏览器的一部分=> 在MAC中的safari浏览器上,是不算的 滚动条是隐形的 + ...
- 浏览器卷去的高度固定 js
先看效果,代码在下面 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
- js获取浏览器滚动条距离顶端的距离
js获取浏览器滚动条距离顶端的距离 一.jQuery获取的相关方法 jquery 获取滚动条高度 获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 : ...
- 绒毛动物探测器:通过TensorFlow.js中的迁移学习识别浏览器中的自定义对象
目录 起点 MobileNet v1体系结构上的迁移学习 修改模型 训练新模式 运行物体识别 终点线 下一步是什么?我们可以检测到脸部吗? 下载TensorFlowJS-Examples-master ...
- 如何获得当前屏幕顶端距离整个页面最上端的距离(即js获取浏览器滚动条距离顶端的距离)
最近在做项目的时候遇到需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小,在这儿做一个整理保存: 一.jQuery获取的相关方法 Js代码 jquery 获取滚动条高度 ...
- js温故而知新8(浏览器)——学习廖雪峰的js教程
浏览器 目前主流的浏览器: IE 6~11:从IE10开始支持ES6标准: Chrome:基于Webkit内核,内置了非常强悍的JavaScript引擎--V8: Safari:基于Webkit内核: ...
- WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...
- Vue.js学习笔记 2022 04 17
Vue.js学习笔记 1 Vue.js基础 Vue.js介绍 vuejs 渐进式 JavaScript 框架 Vue.js 如何应用 1 在普通html项目中,引入VUE.JS Hb 的项目 生成的 ...
最新文章
- android测试 课程设计,超星尔雅Android开发课程设计章节测试答案
- 区块链BaaS云服务(35)亦笔科技ODRChain使用场景
- 软件测试之黑盒测试-等价类划分法
- elasticsearch-7.15.2 同时支持中文ik分词器和pinyin分词器
- bootstraptable 怎么在特定行添加数据_同等权限下多任职之间数据权限的实例
- [Android] SharedPreference的使用
- Leetcode 199
- msm8953 fm设置频段流程
- 51CTO学院两周岁啦,贺春旸送上祝福!
- 时间对于程序员的价值,以及如何高效地利用时间,同时划分下勤奋度的等级
- HDU - 6438 Buy and Resell (贪心 + 优先队列)
- APP开发商城时,常说三级分销,你知道什么是分销机制吗?
- XBL用于防治botnet
- 浏览器野史 UserAgent 列传(上)
- Microsoft Edge浏览器插件(1)
- c#自定义事件以及与其他事件绑定
- 解决ORA-00257:archiver error.Connect internal only, until freed
- 为什么越来越多的网站域名不加www前缀?
- mysql 百万级别 更新_mysql百万级数据高效插入和更新
- “刷脸”支付强化安全管理 标准制定正在推进
热门文章
- python使用系统命令连接数据库_windows下命令行方式完成MySQL配置及Python连接数据库...
- python后端程序例子_Python MR程序示例
- echarts 按需引入模_【React】react项目引入echarts插件
- python写登录界面跳转至数据库操作_pycharm+jdango+python实现创建web工程并实现简单登陆...
- 电脑右下,电脑右下图标怎么显示出来怎么办
- 机器学习决策树_机器学习-决策树 Decision Tree
- wifi rssi 计算 距离_SKYLAB:蓝牙室内定位与WiFi室内定位的对比分析
- 系统学习机器学习之增强学习(五)--马尔可夫决策过程策略TD求解(SARSA)
- 决策树(七)--Boost及源码分析
- Vscode快捷键整理