scrolltop

如何判断元素是否在可视区域ViewPort

由 旧街凉风 提交于 2019-12-03 16:56:59
个性签名: 生如夏花，逝如冬雪；人生如此，何悔何怨。 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop这几个关键字的出现更是家常便饭，每次碰到都需要事先实验一番。为了下次开发提高效率。在这里一次性做个总结， 以用来判断元素是否在可视区域以及用原生js简单实现懒加载 。文末有个简单的懒加载实现的demo，有需要的可以看一下。 目录 工欲善其事，必先利其器。在判断元素是否在可视区域实现简单的原生懒加载前，我们先简单回顾下以下几个关键的概念。 ps： 如果你对这些概念已经比较熟悉了，可以直接跳到第五点查看关键代码示例。 1. 偏移量 偏移量(offset dimension),元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小( 注意，不包括外边距 )。通过下列4个属性可以取得元素的偏移量。 偏移量 概念 公式 offsetHeight 元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、(可见的) 水平滚动条的高度、上边框高度和下边框高度。 offsetHeght = content + padding + border + scrollX offsetWidth 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、(可见的)垂 直滚动条的宽度、左边框宽度和右边框宽度

「前端进阶」高性能渲染十万条数据(虚拟列表) （自己修改版本）

由 拜拜、爱过 提交于 2019-12-03 15:36:51
前言 在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。 在高性能渲染十万条数据(时间分片)一文中，提到了可以使用时间分片的方式来对长列表进行渲染，但这种方式更适用于列表项的DOM结构十分简单的情况。本文会介绍使用虚拟列表的方式，来同时加载大量数据。 为什么需要使用虚拟列表 在实际的工作中，列表项必然不会仅仅只由一个li标签组成，必然是由复杂DOM节点组成的。 那么可以想象的是，当列表项数过多并且列表项结构复杂的时候，同时渲染时，会在Recalculate Style和Layout阶段消耗大量的时间。 而虚拟列表就是解决这一问题的一种实现。 什么是虚拟列表 虚拟列表其实是按需显示的一种实现，即只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染的技术，从而达到极高的渲染性能。 假设有1万条记录需要同时渲染，我们屏幕的可见区域的高度为500px,而列表项的高度为50px，则此时我们在屏幕中最多只能看到10个列表项，那么在首次渲染的时候，我们只需加载10条即可。 说完首次加载，再分析一下当滚动发生时，我们可以通过计算当前滚动值得知此时在屏幕可见区域应该显示的列表项。 假设滚动发生

jQuery add and remove $(window).scroll(function()?

由 有些话、适合烂在心里 提交于 2019-12-03 14:35:28
问题 How can I remove and then add the $(window).scroll ? I need to store a variable and reuse it after some event. // here i store my var $(window).scroll(function(){ myScroll = $(window).scrollTop() }); $("#itemUnbind").click(function(){ // here i need to remove the listener }); $("#itemBind").click(function(){ // here i need to add listener again }); Thank you. 回答1: You need to store the function in a variable and then use off to remove it: var scrollHandler = function(){ myScroll = $(window)

jquery fade out div with page scroll

由 梦想与她 提交于 2019-12-03 13:27:31
问题 I am trying to fade a div out as the page scrolls down (with the page scroll - not just a fadeOut effect). I'm adjusting the opacity of the div as the page scrolls down using this piece of code here: $(window).scroll(function() { var scroll = $(window).scrollTop(); $('.logo_container').css({'opacity':( 100-scroll )/100}); }); My issue here is that for me it fades out too fast, I'd like a much more subtle fade as the user scrolls. Can anyone think of a better logic to make a slower, more

Does WebKit have a clipping bug?

由 社会主义新天地 提交于 2019-12-03 10:52:37
Given a region where the line-height and any margins are n , and the region has a height that is a multiple of n , and the scrollTop is increased by multiples of n I find that I get the result I expect in Firefox, Opera and NetFront but in Chrome (Windows), Safari (Mac) and the latest WebKit nightly (Mac) there is some leakage and I see partial lines. In my actual project (which I can't share) the effect is quite pronounced, but even in a reduced test case, the bottom of the previous line can be seen peaking out at the top of the box. Is it possible to avoid this effect? Is this a bug in the

get height for a div with overflow:auto;

由 不问归期 提交于 2019-12-03 10:30:53
i have a div with height:100px and overflow:auto the content is dynamic. i want scroll the div in the bottom i tried with $("#chat_content").scrollTop($("#chat_content").height()); but if the content is bigger than 100px $("#chat_content").height() returns 100 and the div isn't scrolled on the bottom how can i do? thanks Get the scrollHeight property from the underlying DOM element: $("#chat_content").scrollTop($("#chat_content").get(0).scrollHeight); try $("#chat_content").scrollTop($("#chat_content").get(0).scrollHeight); Another way is to just wrap the internal content in a div and then

Fixed sidebar on the scroll stop at div

由 匿名 (未验证) 提交于 2019-12-03 09:13:36
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I try to make sure that a div "filter" becomes fixed when scrolling and then stop when it comes down to "outside_footer_wrapper". use the following script but can not get it to work? jsfiddle $(function() { var top = $('#filter').offset().top - parseFloat($('#filter').css('marginTop').replace(/auto/, 0)); var footTop = $('#outside_footer_wrapper').offset().top - parseFloat($('#outside_footer_wrapper').css('marginTop').replace(/auto/, 0)); var maxY = footTop - $('#filter').outerHeight(); $(window).scroll(function(evt) { var y = $(this)

jquery: $(window).scrollTop() but no $(window).scrollBottom()

由 匿名 (未验证) 提交于 2019-12-03 08:33:39
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I want to place an element to the bottom of the page whenever the user scrolls the page. It's like "fixed position" but I can't use "position: fixed" css as many of my clients' browser can't support that. I noticed jquery can get current viewport's top position, but how can I get the bottom of the scroll viewport? So I am asking how to know: $(window).scrollBottom() 回答1: var scrollBottom = $(window).scrollTop() + $(window).height(); 回答2: I would say that a scrollBottom as a direct opposite of scrollTop should be: var scrollBottom = $

js 原生判断内容区域是否滚动到底部

由 为君一笑 提交于 2019-12-03 05:30:50
逻辑 判断内容滚动到底需要知道的信息 内容区域的真实高度（也就是滚动区域） 滚动条距离顶部的位置 内容区域的可见高度 分别对应下面的三个API。 element.scrollHeight 获取元素内容高度，，，【只读属性】 element.scrollTop 可以获取或者设置元素的偏移值，常用于，计算滚动条的位置,当一个元素的容器没有产生垂直方向的滚动条,那它的 scrollTop 的值默认为0. element.clientHeight 读取元素的可见高度【只读属性】 下面直接引用MDN上面的一个经典的公式 判定元素是否滚动到底 如果元素滚动到底，下面等式返回true，没有则返回false. element.scrollHeight - element.scrollTop === element.clientHeight 案例-用户使用协议 只有等用户阅读完协议才可以点击同意，也就是说滚动条到底部之后代表完成阅读 <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title > tab </ title > < style > textarea { height : 200 px ; width : 300 px } </ style > </ head > < body > <

jq监听页面的滚动

由 笑着哭i 提交于 2019-12-03 05:26:25
1、当前滚动的地方的窗口顶端到整个页面顶端的距离： var toTop = $(window).scrollTop(); 2、获取指定元素的页面位置： $(dom).offset().top; 3、对页面滚动条滚动的监听： $(window).scroll(function(event){}); 4、设置滚动条到指定位置。。 $(window).scrollTop(offset) 5、缓慢回到顶部。 $('html,body').animate({scrollTop: '0px'}, 800); 6、监听返回滚动位置 $(window).scroll(function(event){ var toTop = $(window).scrollTop(); console.log(toTop); }); 来源： CSDN 作者： GEVAS 链接： https://blog.csdn.net/qq_30068989/article/details/87859635
订阅 scrolltop