jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop、scrollLeft、scrollHeight。...我们现在只探讨和垂直滚动有关的 scrollTop、scrollHeight 属性。...滚动条向下拖动一段距离,看到的页面效果如下(右部的a、b是我抓图后,用PS标出来的): 那么,这里的外部div 的scrollTop、scrollHeight 属性到底是什么呢?...有人说,scrollTop等于图中标出的a。scrollHeight 等于外部div的高度500px。其实,都不对。... jquery-1.10.2.js"> <script language=
border: 1px solid #000; overflow: auto; } jquery...document.getElementsByTagName("button"); btns[0].onclick = function () { // 获取滚动的偏移位 console.log($(".scroll").scrollTop...()); // 获取网页滚动的偏移位 // 兼容写法 console.log($("body").scrollTop()+$("html").scrollTop...()); } btns[1].onclick=function() { // 设置滚动的偏移位 $(".scroll").scrollTop(300); $("...html,body").scrollTop(300); } }); 我是div我是div我是div我是div我是div我是div我是
在chrome中获取滚动条的垂直偏移 console.log($(document.documentElement).scrollTop()) 但是上面代码在IE中不生效 在IE中是这样获取的 console.log...($(document.body).scrollTop()) 要解决两个兼容问题很简单,直接将两个向加即可,因为两个方法只有一个生效 console.log($(document.documentElement...).scrollTop()+$(document.body).scrollTop()) 设置偏移也是如此 $(html,body).scrollTop(300)
问题 我在个人站点的左下角和右下角各自使用了如下代码来将页面滚动到顶部和底部: 1 2 3 $("body").animate({scrollTop:0},800); $("body").animate...({scrollTop:$(document).height()},800); 最近才忽然发现在Chrome浏览器下,上面的代码没有问题,而在Firefox下却是无效的。...百度后才知道,原来这是因为这两个浏览器自身的问题导致的。...解决方法 既然这两个浏览器各自支持一种标签选择器,那么只要把两者统合起来即可实现兼容: 1 $("html,body").animate({"scrollTop":top}); 最终,将我的代码改成如下形式便没问题了...()},800); 参考链接 jQuery中animate()方法以及$(‘body’).animate({“scrollTop”:top})不被Firefox支持问题的解决 警告 本文最后更新于 May
jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop、scrollLeft、scrollHeight。...我们现在只探讨和垂直滚动有关的 scrollTop、scrollHeight 属性。...有人说,scrollTop等于图中标出的a。scrollHeight 等于外部div的高度500px。其实,都不对。...而scrollTop表示滚动条(一个点)当前的位置在750px里占了多少,不是图中标出的a。... jquery-1.10.2.js"> <script language=
今天说一说scrollTop()方法,希望能够帮助大家进步!!!...scrollTop设置滚动条用法 前提 工作中需要做一个点击右侧网元或板卡,左侧topo图滚动到对应位置 用到的知识点 scrollTop(),position(),工作环境中用了Jtopo,Ztree...scrollTop定义与用法 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。 scroll top offset 指的是滚动条相对于其顶部的偏移。...$(selector).scrollTop(offset) //offset可选 position定义与用法 position() 方法返回匹配元素相对于父元素的位置(偏移)。...if(offsetTop >= 0){ if(offsetTop - (bheight/2) >= 0){ $("#right_Tree").scrollTop
项目中遇到这个小问题,看到有前辈总结,借来用一下 document.body.scrollTop与document.documentElement.scrollTop兼容 这两天在写一个JS的网页右键菜单...,在实现菜单定位的时候发现了这个问题:chrome居然不认识document.documentElement.scrollTop!...由于在不同情况下,document.body.scrollTop与document.documentElement.scrollTop都有可能取不到值,那到底网页的scrollTop值怎么得到呢?...比如document.body.scrollTop能取到值的时候,document.documentElement.scrollTop就会始终为0;反之亦然。...所以,如果要得到网页的真正的scrollTop值,可以这样: varsTop=document.body.scrollTop+document.documentElement.scrollTop;
在页面显示浮动层时,IE、Firefox下都能显示正常,但Chrome下出现了浮动层永远显示在上面,经过仔细分析,发现Chrome对document.documentElement.scrollTop的识别会出现误差...不过加上document.body.scrollTop后,则显示正常。 ...由于document.documentElement.scrollTop和document.body.scrollTop在标准模式或者是奇怪模式下都只有一个会返回有效的值,所以都加上也不会有问题(看来上面的问题是...("poster").style.top = document.documentElement.scrollTop + "px"; else if (document.body)...("poster").style.top = document.documentElement.scrollTop +document.body.scrollTop+ "px";
自接触js以来一直使用的是jquery插件,对js的了解甚少,经常容易混淆element.scrollHeight、element.scrollTop等方法。今天对这些方法做出比较。...scrollTop:可以设置或者获取元素的已滚动的上部不可见区域的高度。 <!...pL = p.length; for(var i=1; i<=pL; i++){ p[i-1].className = "p" + i; } element.scrollTop...= 300; console.log("element's scrollTop = " + element.scrollTop); 第七行代码设置了scrollTop,第八行输出了scrollTop...,输出值为: element’s scrollTop = 300。
每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性,单凭单词很难搞清楚分别代表什么意思之间有什么区别...scrollTop: 代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px,可读可设置。 ?...最后附上这些属性的详细解释的文档: clientHeight offsetHeight offsetTop scrollHeight scrollTop
所以当滚动条在最顶端的时候,scrollTop=0,当滚动条在最低端的时候,scrollTop=115 这个115怎么来的(滚动条高度是15,我量的),见下图。(实为我主观臆测,不保证准确性。。。..._(:з」∠)_ scrollTop是一个整数。 如果一个元素不能被滚动,它的scrollTop将被设置为0。 设置scrollTop的值小于0,scrollTop被设为0。...如果设置了超出这个容器可滚动的值,scrollTop会被设为最大值。...判定元素是否滚动到底: element.scrollHeight – element.scrollTop === element.clientHeight 返回顶部 element.scrollTop...= 0; let dy = ele.scrollTop / 4; // 每次更新scrollTop改变的大小 if (ele.scrollTop > 0) { ele.scrollTop -= Math.max
虽然我是做后台出身的,但最近心血来潮越来越关注前台技术了^_^,前二天看了“司徒正美”先生的图片无缝滚动分析后,对于scrollTop和offsetTop这二个以前一直没搞太明白的属性研究了一番,大致弄明白了...doctype html> scrollTop study .outer{}{ position:relative;...document.getElementById("item2"); var result = document.getElementById("result"); outer.scrollTop...++ ; result.innerHTML = "container.scrollTop=" + outer.scrollTop + ",item2.offsetTop...然后里面放了二个100*60的子div,显然60*2=120px,大于最外层容器的100px高度,所以会有一部分被截掉,为了更形象,二个子div上面还放置了一行文字,高度为18px,点击按钮后,最下面绿色子div的scrollTop
scollTop scrollTop 可以被设置为任何整数值,同时注意: 如果一个元素不能被滚动(例如,它没有溢出,或者这个元素有一个”non-scrollable”属性), scrollTop将被设置为...设置scrollTop的值小于0,scrollTop 被设为0 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值....总结:元素发生溢出时可以设置scrollTop,设置的值为元素里内容向上滚动的不可见区域的高度 scollHeight 判定元素是否滚动到底 如果元素滚动到底,下面等式返回true,没有则返回false.... element.scrollHeight - element.scrollTop === element.clientHeight 总结:当元素无溢出时为元素本身的高度,当元素发生溢出时为元素内容里面的总高度...document.getElementById('scrollBody').scrollTop = 200; console.log(document.getElementById(
DOCTYPE html> jquery/1.10.2/jquery.min.js"> </script
比如这段小代码啊 jquery/jquery.js"> <script type=
outerctn.scrollHeight; var $outerctn_h=$outerctn.height(); var innerctn_h=innerctn.height(); var scrollTop...=innerctn_h-$outerctn_h; $outerctn.on('scroll',function(){ console.log($(this).scrollTop(),scrollTop...) if($(this).scrollTop()>=scrollTop){ console.log('滚动条到达底部了') } }) 发布者:全栈程序员栈长
网页正文全文高:document.body.scrollHeight 网页可见区域高(包括边线的高):document.body.offsetHeight 网页被卷去的高:document.body.scrollTop...屏幕分辨率高:window.screen.height 每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5...scrollTop: 代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px,可读可设置。
一、scroll家族 offset 自己的偏移 scroll滚动的 scrollTop和scrollLeft scrollTop 被卷去的头部 当滑动滚轮浏览网页的时候,网页隐藏在屏幕上方的距离 二、页面滚动效果事件...window.onscroll=function(){页面滚动语句} 三、获取scrollTop 谷歌和没有声明DTD:document.body.scrollTop 火狐和其他浏览器...:document.documentElement.scrollTop IE9+和最新浏览器:window.pageXOffset; pageYOffset(scrollTop) 兼容性写法: var...scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0; 四、json对象表示...DOCTYPE html> 2 3 4 5 封装自己的scrollTop
问题:今天项目上有个地方使用 $(“#lamp”).load(‘/admin/checklogin.php?...sid=’+sid); 这样传递的时候遇到空格就直接参数就丢失 后经查询资料发现可以使用encodeURIComponent(这里有三个函数可以对html进行编码,具体可以自行查找资料)解决问题;但是问题就又来了...查询Jquery资料看到文档中有这样一句话: 默认使用 GET 方式 – 传递附加参数时自动转换为 POST 方式。...jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 “url #some > selector”。