scrolltop | 易学教程

html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

阅读更多关于 html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量这里是javascript中建造迁移转变代码的常用属性页可见区域宽： document.body

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

阅读更多关于 HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量这里是 JavaScript 中建造迁移转变代码的常用属性页可见区域宽： document.body

监听页面滚动及滚动到指定位置

阅读更多关于监听页面滚动及滚动到指定位置

两种监听页面滚动的方法一、原生js通过window.onscroll监听 window.onscroll = function() { //为了保证兼容性，这里取两个值，哪个有值取哪一个 //scrollTop就是触发滚轮事件时滚轮的高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; console.log("滚动距离" + scrollTop); } 二、Jquery通过$(window).scroll()监听 $(window).scroll(function() { //为了保证兼容性，这里取两个值，哪个有值取哪一个 //scrollTop就是触发滚轮事件时滚轮的高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; console.log("滚动距离" + scrollTop); }) 将页面滚动到指定位置主要使用的是锚点技术，锚点元素通过scrollTop值改变进行定位。锚点锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样，是一种页面内的超级链接。法一直接使用scrollTop 使用scrollTop方法

HTML DOM 事件（实现一个简单的回到顶部功能）

阅读更多关于 HTML DOM 事件（实现一个简单的回到顶部功能）

HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。利用onscroll事件写一个回到顶部功能，代码如下： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> *{margin: 0;padding: 0;} #mybtn{position: fixed;height: 40px;width: 100px;background: red;border: none;border-radius: 5px;right: 20px;bottom: 20px;cursor: pointer;display: none;} #mybtn:hover{background-color: #888888;color: #FFFFFF;} </style> </head> <body>

css中位置计算

阅读更多关于 css中位置计算

一、position属性 1. position的属性： ① absolute ：绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的已定位（设定了position）父元素 (postion不为static)，否则为Body文档本身。 ② relative ：相对定位；不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。 ③ fixed ：固定定位；类似于absolute，但不随着滚动条的移动而改变位置。（在浏览器中保持固定位置） ④ static ：默认值；默认布局。默认值。没有定位 2. position的辅助属性 position属性只是使元素脱离文档流，要想此元素能按照希望的位置显示，就需要使用下面的属性(position:static不支持这些)： ①left ：表示向元素的左边插入多少像素，使元素向右移动多少像素。 ②righ t ：表示向元素的右边插入多少像素，使元素向左移动多少像素。 ③top ：表示向元素的上方插入多少像素，使元素向下移动多少像素。 ④bottom ：表示向元素的下方插入多少像素，使元素向上移动多少像素。上面属性的值可以为负，单位：px 。 3. 滚动条出现当含有position属性的元素为最边缘元素时：

网页各坐标关于clientX、scrollLeft、offsetLeft、clientLeft等

阅读更多关于网页各坐标关于clientX、scrollLeft、offsetLeft、clientLeft等

这里如果有框架代码的话，可能会更直接一些，里面有些盒子的值都不知道是哪来的，只选自己看得懂的看吧。以下是对部分值的解释。 1. clientHeight : 都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。 2. clientLeft,clientTop:这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0. 3. scrollHeight,scrollWidth:不管有多少对象在页面上可见,他们得到的是整体. 4. scrollLeft,scrollTop:如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素. 对于不可以滚动的元素,这些值总是0. 5.event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标其它的相关： scrollHeight: 获取对象的滚动高度（包括padding，不包括border ）。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标

移动端弹出阴影遮罩的几点问题和解决方法

阅读更多关于移动端弹出阴影遮罩的几点问题和解决方法

在做移动端的立即购买页面时，点击底部固定栏立即购买按钮需要弹出一个阴影遮罩，在遮罩顶部有一个固定在底部的页面，所以总共是3层页面：最底层浏览页->阴影遮罩页->最上层的立即购买选择规格数量页；效果如下图：在次过程中遇到的一些问题以及解决方案总结如下：问题1：阴影遮罩出现后底部的页面还可以滑动；解决：在弹出遮罩的js里click事件中，给body加overflow:hidden的css属性；$("body").css("overflow","hidden"); 问题2：页面向上滑动，阴影遮罩和阴影遮罩上的立即购买页面会随着往上移动；解决：编写了如下函数计算页面移动的距离，让遮罩和立即购买页面也移动相应的距离，代码如下： [html] view plain copy function getScrollTop(){ var scrollTop= 0; if(document.documentElement&&document.documentElement.scrollTop){ scrollTop= document.documentElement.scrollTop; }else if(document.body){ scrollTop= document.body.scrollTop; } return scrollTop; } 写了一个简单的demo，代码如下：

python+selenium+js 处理滚动条

阅读更多关于 python+selenium+js 处理滚动条

selenium并不是万能的，有时候页面上操作无法实现的，这时候就需要借助JS来完成了。常见场景：当页面上的元素超过一屏后，想操作屏幕下方的元素，是不能直接定位到，会报元素不可见的。这时候需要借助滚动条来拖动屏幕，使被操作的元素显示在当前的屏幕上。滚动条是无法直接用定位工具来定位的。selenium里面也没有直接的方法去控制滚动条，这时候只能借助J了，还好selenium提供了一个操作js的方法: execute_script()，可以直接执行js的脚本。一、JavaScript简介 1.JavaScript是世界上最流行的脚本语言，因为你在电脑、手机、平板上浏览的所有的网页，以及无数基于HTML5的手机App，交互逻辑都是由JavaScript驱动的。简单地说， JavaScript是一种运行在浏览器中的解释型的编程语言。那么问题来了，为什么我们要学JavaScript？ 2.有些特殊的操作selenium2+python无法直接完成的，JS刚好是这方面的强项，所以算是一个很好的补充。对js不太熟悉的，可以网上找下教程，简单了解些即可。 http://www.w3school.com.cn/js/index.asp 4 二、控制滚动条高度 1.滚动条回到顶部： js="var q=document.getElementById(‘id‘).scrollTop=0

Html吸顶效果

阅读更多关于 Html吸顶效果

Html吸顶效果一、HTML HTML中需要给div一个id <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div id="head"></div> </body> </html> 专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）二、CSS <style> #head { background-color: #989898; width: 100%; height: 100px; margin-top: 100px; } #head[data-fixed="fixed"]{ position: fixed; top:0; left: 0; margin: 0; } </style> 三、JS 1、面向过程 <script> var obj = document.getElementById("head"); var ot = obj.offsetTop; document.onscroll = function () { var st = document.body.scrollTop || document

关于scrolltop 兼容 IE6/7/8, Safari,FF的方法

阅读更多关于关于scrolltop 兼容 IE6/7/8, Safari,FF的方法

1、各浏览器下 scrollTop的差异 IE6/7/8：对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度；对于有doctype声明的页面则可以使用 document.documentElement.scrollTop ； Safari: safari 比较特别，有自己获取scrollTop的函数： window.pageYOffset ； Firefox: 火狐等等相对标准些的浏览器就省心多了，直接用 document.documentElement.scrollTop ； 2、获取scrollTop值完美的获取scrollTop 赋值短语： var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; 通过这句赋值就能在任何情况下获得scrollTop 值。仔细观察这句赋值，你发现啥了没？？没错，就是 window.pageYOffset (Safari) 被放置在 || 的中间位置。因为当数字0 与 undefine 进行或运算时，系统默认返回最后一个值。即或运算中 0 == undefine ; 当页面滚动条刚好在最顶端

订阅 scrolltop