scrolltop | 易学教程

jQuery-1.9.1源码分析系列（十三）位置大小操作

阅读更多关于 jQuery-1.9.1源码分析系列（十三）位置大小操作

　　先列一下这些个api jQuery.fn.css (propertyName [, value ]| object ) （函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值。如果需要删除指定的css属性，请使用该函数将其值设为空字符串("") 　　注意：1、如果省略了value参数，则表示获取属性值；如果指定了该参数，则表示设置属性值。2、css()函数的所有"设置"操作针对的是当前jQuery对象所匹配的每一个元素；所有"读取"操作只针对第一个匹配的元素。） jQuery.fn.offset([coordinatesObj]) （设置或返回当前匹配元素（将content+padding+border看成一个整体）相对于当前文档的偏移，也就是相对于当前文档的坐标。该函数只对可见元素有效。该函数返回一个坐标对象(Object)，该对象有一个left属性和top属性。属性值均为数字，它们都以像素(px)为单位。与position()不同的是：offset()返回的是相对于当前文档的坐标，position()返回的是相对于其定位的祖辈元素的坐标。） jQuery.fn.position() （返回当前匹配元素（将content+padding+border+margin看成一个整体）相对于其被定位的祖辈元素的偏移，也就是相对于被定位的祖辈元素的坐标

scrollTop和scrollLeft属性

阅读更多关于 scrollTop和scrollLeft属性

外层元素的高度值是200px,内层元素的高度值是300px。很明显，“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时，有部分内容会隐没在“外层元素的上边界”之外，scrollTop就等于这部分“不可见的内容”的高度。 scrollLeft也是这样。 <html> <head> <title>test scrollTop</title> <style type="text/css"> #out{ width:300px; height:200px; background-color:yellow; overflow:auto; } #in{ width:400; height:300; background-color:red; overflow:auto; } </style> <script type="text/javascript"> function scollT(){ var scrollTopSize = document.getElementById("out").scrollTop; var scrollLeftSize = document.getElementById("out").scrollLeft; console.log("scrollTop:" + scrollTopSize + ",scrollLeft:" +

scrollTop,scrollLeft

阅读更多关于 scrollTop,scrollLeft

document.body.scrollTop用法网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： document.body.scrollHeight; 网页被卷去的高： document.body.scrollTop; 网页被卷去的左： document.body.scrollLeft; 网页正文部分上： window.screenTop; 网页正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的宽： window.screen.width; 屏幕可用工作区高度： window.screen.availHeight; 屏幕可用工作区宽度：window.screen.availWidth; scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop

jquery scrollTop()与scrollLeft()

阅读更多关于 jquery scrollTop()与scrollLeft()

1.scrollLeft() scrollLeft() 方法设置或返回被选元素的水平滚动条位置。提示：当滚动条位于最左侧时，位置是 0。当用于返回位置时：该方法返回第一个匹配元素的滚动条的水平位置。 $(selector).scrollLeft() 当用于设置位置时：该方法设置所有匹配元素的滚动条的水平位置。 $(selector).scrollLeft(position) 2.scrollTop() 定义和用法 scrollTop() 方法设置或返回被选元素的垂直滚动条位置。提示：当滚动条位于最顶部时，位置是 0。当用于返回位置时：该方法返回第一个匹配元素的滚动条的垂直位置。 $(selector).scrollTop() 当用于设置位置时：该方法设置所有匹配元素的滚动条的垂直位置。 $(selector).scrollTop(position) 来源： https://www.cnblogs.com/wanguofeng/p/10784214.html

性能优化之节流、防抖

阅读更多关于性能优化之节流、防抖

1. 防抖：由于dom操作极其昂贵，所以尝试过多的dom操作有可能会将浏览器搞崩溃，比如onresize、onscroll这类事件操作；为了解决这个问题，引出防抖的概念（某些代码不可以在没有间断的情况下连续重复执行）；方案：第一次调用函数创建一个定时器，在指定时间之后执行代码；在第二次调用时，清除掉前一次的定时器并重新设置一个；这种方案下，如果第一个定时器已经执行，这个操作就没意义；如果第一个没执行，则将其替换为新的定时器；目的是只有在执行函数的请求停止一段时间后才执行；适用于代码是周期执行的，但是你不能控制请求执行的速率；函数防抖让一个函数只有在你不断触发后停下来歇会才开始执行，中间你操作得太快它直接无视。 // 函数防抖 function debounce(method, context) { clearTimeout(method.tid); // mthod是真实要执行的函数，context是执行的作用域（默认window） method.tid = setTimeout( function () { method.call(context) // 确保方法在适当的环境中执行 }, 100 ); } // onscroll时函数防抖 function scrollFun() { var marginBot = 0 ; if (document

js 鼠标双击滚动单击停止

阅读更多关于 js 鼠标双击滚动单击停止

js 鼠标双击滚动单击停止在script中加入代码 var currentpos,timer; function initialize() { timer=setInterval("scrollwindow()",3); } function sc(){ clearInterval(timer); } function scrollwindow(){ if(document.body.scrollTop){//加了DTD头时,document.body.scrollTop值始终为0,在此判断一下 currentpos=document.body.scrollTop; window.scroll(0,++currentpos); if (currentpos != document.body.scrollTop){ sc(); } } else{ currentpos=document.documentElement.scrollTop; window.scroll(0,++currentpos); if (currentpos != document.documentElement.scrollTop){ sc(); } } } document.onmousedown=sc document.ondblclick=initialize 来源： https://www

移动端开发——移动端遮罩层滚动防穿透body解决方案

阅读更多关于移动端开发——移动端遮罩层滚动防穿透body解决方案

经常做移动端网页开发的朋友们，都应该会遇到，弹起遮罩层的交互需求，比如小点的toast提示框，modal对话框，也有满屏的提示框，或者可操作交互的弹框；有些需求是要求在弹框上可操作，可滚动；在滚动时，就会遇到比较奇怪的兼容bug了，当你在滑动遮罩层时，下面的body页面也会跟着滚动，页面发生了“穿透”，即便你对弹出的元素设置最高级别的z-index，没什么用；对这个坑也是研究了一端是时间，才搞定，下面给他家分享一个实测非常有用的解决方案：大致思路，就是弹框出现时，给body设置禁止滚动（overflow:hidden）；弹框消失时，再回复该属性；直接贴代码（主要就是CSS+JS），使用方式很简单（代码可直接复制使用）， 1、先命名一个css样式属性： body.modal-open { position: fixed; width: 100%; } 2、js创建一个命名空间，用来动态给body绑定第一步设定的属性； var ModalHelper = (function (bodyCls) { var scrollTop; return { afterOpen: function () {//弹框弹出时 scrollTop = document.scrollingElement.scrollTop; document.body.classList.add(bodyCls);

返回顶部的几种方法

scrollTop() scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度由于scrollTop是可写的，可以利用scrollTop来实现回到顶部的功能 <body style="height:2000px;"> <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button> <script> test.onclick = function(){ document.body.scrollTop = document.documentElement.scrollTop = 0; } </script> </body> 2. scrollTo() scrollTo(x,y)方法滚动当前window中显示的文档，让文档中由坐标x和y指定的点位于显示区域的左上角设置scrollTo(0,0)可以实现回到顶部的效果 <body style="height:2000px;"> <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button> <script> test.onclick =

$(window).scrollTop() vs. $(document).scrollTop()

阅读更多关于 $(window).scrollTop() vs. $(document).scrollTop()

问题 What\'s the difference between: $(window).scrollTop() and $(document).scrollTop() Thanks. 回答1: They are both going to have the same effect . However, as pointed out in the comments: $(window).scrollTop() is supported by more web browsers than $('html').scrollTop() . 回答2: First, you need to understand the difference between window and document. The window object is a top level client side object. There is nothing above the window object. Javascript is an object orientated language. You start

jQuery scrolltop firefox not working

阅读更多关于 jQuery scrolltop firefox not working

问题 This script: function onscroll(){ document.getElementById(\"divs\").style.top=\"\"+$(\'body\').scrollTop()+\"px\"; } Fiddle: http://jsfiddle.net/Hed2J/1/ Doesn\'t work on the latest Firefox version! What am I doing wrong? :) Thanks for the help! Edit: Edited with JSFiddle and full script :) as attached to an onscroll event 回答1: Try this fiddle, it is working in chrome, ie and the latest version of mozilla : http://jsfiddle.net/Hed2J/3/ I replace $('body').scrollTop() with $(window).scrollTop(

订阅 scrolltop