页面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">
            <
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值