scrolltop

懒加载的原理 原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。 这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。 代码实现 既然懒加载的原理是基于判断元素是否出现在窗口可视范围内，首先我们写一个函数判断元素是否出现在可视范围内： function isVisible ($node) { var winH = $(window).height(), scrollTop = $(window).scrollTop(), offSetTop = $(window).offSet().top; if (offSetTop < winH + scrollTop) { return true ; } else { return false ; } } 再添加上浏览器的事件监听函数，让浏览器每次滚动就检查元素是否出现在窗口可视范围内： $( window ). on ( "scroll" , function { if (isVisible($node)){ console .log( true ); } }) 我们已经很接近了，现在我们要做的是

iOS and iframes.. such a pain. I've a simple back to top button which should animate the scrolling (instead of just jumping to the top of the page). $(document).on('click touchstart', '.backtotop', function() { $('html, body').animate({ scrollTop: 0 }, 1500); }); This works everywhere, except for iframes on iOS. I still haven't fully understood how iOS handles iframes. jQuery's .scrollTop() function won't work either (which can't be animated anyway). The only thing which works in iframes on iOS is this: parent.self.scrollTo(0, 0); Obviously not the best solution since this won't work for

　　我们有时候需要实现这样一种功能：点击一个按钮，然后在按钮的下方显示一个div。当按钮位于角落时，div的位置设定就需要计算，使div完全显示。 　　我打算使用offset()方法实现此功能，但要先弄清楚他的功能。 实验： 　　offset()的top是指元素与document的上边的距离，而不是浏览器当前窗体的上边缘，如图1。 　　图1：document高度超过window，window出现滚动条，拖动滚动条，提交按钮的offset().top不变，因为按钮与document上边缘距离未变。 　　 　　图2：document中的div有滚动条，提交按钮的offset().top随div滚动条变化而变化，因为按钮与document上边缘距离已变。 　　 　　offset().left 同理。 　　通过上面的实验我们可以得出以下结论：offset() 获取元素(html 元素)距离document上边缘、左边缘的像素，我们只要清楚浏览器中document是那部分就可以正确使用offset()。关于document可以阅读 JQuery window、document、 body 应用： 　　1.那么我们怎么保证元素完整的显示在浏览器视窗里呢？我们可以结合offset 和 scrollTop来实现。 　　scrollTop获取的是什么值？根据我的实验，只有元素具有滚动条

scrollTop 是“卷”起来的高度值，示例： <div style="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p"> <div style="width:50px;height:300px;background-color:#0000FF;" id="t">如果为 p 设置了 scrollTop，这些内容可能不会完全显示。</div> </div> <script type="text/javascript"> var p = document.getElementById("p"); p.scrollTop = 10; </script> 由于为外层元素 p 设置了 scrollTop，所以内层元素会向上卷，这卷起来的部分就是 scrollTop。 scrollLeft 也是类似道理。 我们已经知道 offsetHeight 是自身元素的宽度，而 scrollHeight 是内部元素的绝对宽度，包含内部元素的隐藏的部分。上述中 p 的 scrollHeight 为 300，而 p 的 offsetHeight 为 100。 scrollWidth 也是类似道理。 IE 和 FireFox 全面支持，而 Netscape 8 和 Opera 7.6 不支持 scrollTop

内层元素的高度值300px > 外层元素的高度值200px,因此“外层元素的内容”(也就是“内层元素”)无法完全显示，而外层元素把overflow设置为auto，因此外层元素的右侧会出现一个上下方向的滑动条 初始状态下，“内层元素的上边界”和“外层元素的上边界”重合，没有任何内容超过“外层元素的上边界”，此时scrollTop属性的值为0。 当向下拖动滚动条时，超过“外层元素的上边界”的内容会逐渐增多，scrollTop值就等于这些超出的部分。 当拖动滚动条到最底部时，“内层元素的下边界”和“外层元素的下边界”重合，超过“外层元素的上边界”的内容的高度=300px-200px=100px，这也就是此时的scrollTop值。 通过js代码来读取，写入scrollTop的值 注意：scrollTop的使用方式是element.scrollTop，而不是element.style.scrollTop 通过js代码来读取scrollTop的值 来源： http://www.cnblogs.com/idaydayup/archive/2010/10/22/1857973.html

下面的演示中，外层元素的高度值是200px,内层元素的高度值是300px。很明显，“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时，有部分内容会隐没在“外层元素的上边界”之外，scrollTop就等于这部分“不可见的内容”的高度。 演示：（拖动滚动条，可以看到scrollTop值的变化） 这些文字显示在内层元素中。 scrollTop值是： <div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素"> <div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素"> 这些文字显示在内层元素中。 </div> </div> 解释： 内层元素的高度值300px > 外层元素的高度值200px,因此“外层元素的内容”(也就是“内层元素”)无法完全显示，而外层元素把overflow设置为auto，因此外层元素的右侧会出现一个上下方向的滑动条 初始状态下，“内层元素的上边界”和“外层元素的上边界”重合，没有任何内容超过“外层元素的上边界”，此时scrollTop属性的值为0。 当向下拖动滚动条时，超过“外层元素的上边界”的内容会逐渐增多，scrollTop值就等于这些超出的部分。

今天和兄弟一起研究了一下横向和竖向图片滚动的代码，很兴奋，因为解决了几个小问题 第一个： for(var i=1;i<50;i++) { document.getElementById("TextBox1").scrollTop++; document.getElementById("TextBox1").scrollLeft++; } 我刚开始的时候写成了 for(int i=1;i<50;i++) { //document.getElementById("TextBox1").scrollTop++; document.getElementById("TextBox1").scrollLeft++; } IE提示错误，Exception ;我半天不知道怎么回事，最后才发现是犯了个很低级的错误，javascript中的 变量用var定义，可以不定义！ 下面入正题 clientHeight 大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看 到内容的这个区域的高度。 offsetHeight IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。 NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。 scrollHeight IE

问题描述：页面刷新滚动条不返回到最初到位置而是返回之前浏览的位置 要点：通过sessionStorage设置获取刷新页面前的滚动条位置 <div id="outterBox" style="width:100%;height:100%;background:yellow;overflow: auto"> <div id="innerBox" style="background:red">aaaa</div> </div> innerBox的高度由内容撑开且通过后端接口获取数据 ... // let scrollToTop = Number(window.sessionStorage.getItem('top')) ... getRebuildDataResultService(updateId, centerId).then(resp => { if (resp.errorcode == 100) { let respLog = resp.data && resp.data[0] && resp.data[0].log // respLog = respLog.join('<br/>') logs += '<div style="font-size:14px;font-weight:normal;">' logs += respLog logs += '</div>' let

scrollTop() 函数用于 设置或返回当前匹配元素相对于垂直滚动条顶部的偏移 。 当一个元素的实际高度超过其显示区域的高度时，在一定的设置下，浏览器会为该元素显示相应的垂直滚动条。此时， scrollTop() 返回的就是该元素在可见区域之上被隐藏部分的高度(单位：像素)。 如果垂直滚动条在最上面(也就是可见区域之上没有被隐藏的内容)，或者当前元素是不可垂直滚动的，那么 scrollTop() 将返回0。 该函数属于 jQuery 对象(实例)，并且对可见的和隐藏的元素均有效。 语法 jQuery 1.2.6 新增该函数。 jQueryObject.scrollTop( [ value ] )注意：1、如果省略了value参数，则表示返回偏移值；如果指定了该参数，则表示设置偏移值。2、scrollTop()函数的"设置"操作针对的是当前jQuery对象所匹配的每一个元素；"读取"操作只针对第一个匹配的元素。 参数 参数 描述 value 可选/Number类型用于设置的偏移值。 返回值 scrollTop() 函数的返回值为 Number/jQuery类型，返回值的类型取决于 scrollTop() 函数当前执行的是"设置"操作还是"读取"操作。 如果 scrollTop() 函数执行的是"设置"操作，则返回当前jQuery对象本身；如果是"读取"操作