页面DOM元素的scroll与offset相关属性

饰品与衣物的呼应：如项链与衣服上的金属元素相配 #生活知识# #生活美学# #衣物搭配美学#

1.offsetParent

元素的offsetParent属性是距离该元素最近的一个具有定位的父辈元素，如果没有符合条件的父辈元素，那么body就是它的offsetParent。

2.offsetWidth与offsetHeight

offsetWidth=width+横向padding值+横向border值+[横向滚动条width]
实际上，就是元素渲染到页面后的实际宽度尺寸，是否包含横向滚动条的宽度，对于不同浏览器有不同的处理方式，chrome浏览器没有加上横向滚动条的宽度。

同理，offsetHeight也类似。

3.offsetTop与offsetLeft

这两个属性就是“元素与它的offsetParent的上边界与左边界的距离”

4.scrollWidth与scrollHeight

如果要让一个元素的scrollWidth有值，它必须是可以滚动的，要满足至少以下两个条件：
1.元素要有宽度，并且宽度是生效的（如果你给一个行内元素设置width，宽度是不生效的）

2.元素的内部要有一个子元素，或者文本；子元素的width要大于该元素；如果是文本，那么文本在不换行的情况下要超出该元素的水平边界。

一个元素的scrollWidth不等于它自己的宽度，而是等于它的子元素（可滚动元素）的宽度，准确来说，是它的offsetWidth。

同理，scrollHeight也是类似。

5.scrollTop与scrollLeft

scrollTop与scrollLeft就是当可滚动的元素发生滚动时，里面的子元素分别从上边界和左边界出去了多少距离。
同理，jQuery的scrollTop()函数用于设置或返回当前匹配元素相对于垂直滚动条顶部的偏移。

使用scrollTop和offsetHeight判断滚动距离，实现新闻列表无间隙滚动的效果

<div class="list-wrapper" id="wrapper"> <ul class="item-list" id="item-list"> <li class="item"> <div class="pull-left">《聚焦商博会》境外采购商小商品市场行1</div> <div class="pull-right">2017-10-16</div> </li> <li class="item"> <div class="pull-left">《聚焦商博会》境外采购商小商品市场行2</div> <div class="pull-right">2017-10-16</div> </li> <li class="item"> <div class="pull-left">《聚焦商博会》境外采购商小商品市场行3</div> <div class="pull-right">2017-10-16</div> </li> <li class="item"> <div class="pull-left">《聚焦商博会》境外采购商小商品市场行4</div> <div class="pull-right">2017-10-16</div> </li> <li class="item"> <div class="pull-left">《聚焦商博会》境外采购商小商品市场行5</div> <div class="pull-right">2017-10-16</div> </li> <li class="item"> <div class="pull-left">《聚焦商博会》境外采购商小商品市场行6</div> <div class="pull-right">2017-10-16</div> </li> </ul> </div>

12345678910111213141516171819202122232425262728

.list-wrapper { height: 120px; overflow: hidden; margin-top: 20px; } .item-list { padding-left: 0; } .item { overflow: hidden; border-bottom: 1px dashed #ddd; line-height: 30px; }123456789101112131415

<script> var wrapper = document.getElementById('wrapper'); var list = document.getElementById('item-list'); var clone = document.createElement('ul'); clone.innerHTML = list.innerHTML; wrapper.appendChild(clone); wrapper.scrollTop = 0; function scrollUp() { if(wrapper.scrollTop >= list.offsetHeight) { wrapper.scrollTop = 0; } else { wrapper.scrollTop++; } } var time = 100; var myScroll = setInterval('scrollUp()', time); wrapper.onmouseover = function() { clearInterval(myScroll); } wrapper.onmouseout = function() { myScroll = setInterval('scrollUp()', time); } </script>

123456789101112131415161718192021222324

网址：页面DOM元素的scroll与offset相关属性 https://www.yuejiaxmz.com/news/view/976983

相关内容

聊聊JS DOM变化的监听检测与应用 « 张鑫旭
DOM驱动和数据驱动的区别【浅显易懂】
IE8 添加href=javascript:;和click事件，响应完click事件后会导致页面离开，解决方案是去掉href属性
jquery1.8 在IE8 下面报错：对象不支持此属性或方法 return b.getAttribute(“id”)===a
15个每位开发者都应该知道的JavaScript性能优化技巧
HTML中的id和name属性应用
微信小程序常用控件汇总
关于：js怎么获取元素的自定义属性的问题（原生JavaScript）
金属元素与木质元素的混搭美感
Notice: Trying to access array offset on value of type null in /opt/www/runtime/view/f6ea1f2fc4c8cf6543a903b90cf3a25aa97a93c9.php on line 7

随便看看