DOM盒模型和位置 client offset scroll 和滚动的关系

时间: 2019-12-11阅读: 369标签: 滚动

概览

在dom里面有几个描述盒子位置信息的值,

  • pading border margin
  • width height
  • client
    • clientWidth 不要border
    • clientHeight 不要border
  • offset
    • offsetTop
    • offsetLeft
    • offsetWidth  要border
    • offsetHeight  要border
  • scroll
    • scrollTop
    • scrollHeight
    • scrollLeft
    • scrollWidth


盒模型

生产环境一般使用 box-sizing: border-box,
效果:
    width == content.width + pading + border
    height == content.height + pading + border

.antd-pro-pages-test-dom-index-box {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    padding: 5px;
    border-color: grey;
    border-style: solid;
    border-width: 5px;
    margin: 5px;
}


滚动

<div class="container1" style="overflow: auto; height: 200px; width: 200px">
  <ul class="container2" style="position: relative">
     <li>1</li>
     <li>1</li>
     <li>1</li>
     <li>1</li>
  </ul>
</div>
// 把item 放在container的可视区域范围内
function scrollToDom(container, item){
  // 当前元素 上边框上边 到 基线 的距离
    const itemTop = item.offsetTop;
  // 当前元素 下边框下边 到 基线 的距离
  const itemBottom = itemTop + item.offsetHeight;
  
  // container 上边框下边 距离 基线距离
  const containerTop = container.scrollTop;
  // container 下边框上边 距离 基线距离
  const containerBottom = containerTop + container.clientHeight;
  
  if(itemTop < containerTop){
     container.scrollTop = itemTop;
   }
  
  if(itemBottom > containerBottom){
     container.scrollTop = itemBottom - container.clientHeight;
  }
}

此种结构特点
如果垂直滚动条已经出来了

  • .container1 的上下 padding 区域也会有内容

向上滑动

  • 向上滑动, 实质是 .container2 向上滑动了
  • 因为.container2.position == relative  li.offsetParent  也是.container2 , 所以.container1.scrollTop 和 li.offsetTop 基准线都是.container2的上边框, 具有可比性



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/7242

关闭

vue 无限滚动问题

如今web开发中,无限加载是必需的一项功能,尤其是在移动端开发中,一个列表往往默认只加载10条,想看更多只能逐渐往下翻页。那么今天就看看如何在Vue-Cli中实现这个功能

关于滚动贯穿的解决方案

当前容器已经滚动到底部或者顶部,无法再滚动,容器会默认选择上层容器进行滚动,可以说滚动贯穿并非是一个bug,只是一种现象

CSS-界面滚动时不显示滚动条

::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式,你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:::-webkit-scrollbar — 整个滚动条.::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).

jquery扩展方法:实现模拟Marquee无限循环滚动

在一些网站的公告栏有这样的一个效果,如果有多条公告就会出现上下滚动效果【也叫做跑马灯效果】,这是如何实现的呢?下面通过基于jquery的扩展

CSS让页面平滑滚动

在PC浏览器中,网页默认滚动是在<html>标签上的,移动端大多数在<body>标签上,业界浏览器的CSS reset都可以加上这么一条规则:凡是需要滚动的地方都加一句scroll-behavior:smooth就好了!

background-attachement视差滚动

之前项目中没有涉及到视觉滚动的网站,但是毕竟是一种常用的网站类别,不得不了解。实现方法很简单,做一下简单的分析。滚动视差是指多层背景以不同的速度移动,形成立体的运动效果,来带非常出色的视觉体验。

无间歇文字滚动_ 原生js实现新闻无间歇性上下滚动

这篇文章主要介绍使用js实现文字无间歇性上下滚动,一些网站的公告,新闻列表使用的比较多,感兴趣的小伙伴们可以参考一下

js禁止页面滚动

发移动端页面的时候有一个很比较常见的需求,在出现弹窗时,禁止滑动弹窗后面的主体页面。如何实现呢,往下看

如何用js制作滚动文字?

有时候需要展示的文字较多,但是空间较少,为了能充分的利用空间,可以将文字做成自动滚动的方式。例如网页里的新闻。这里用javascript完成这个功能。

H5中滚动到底部的事件

在H5中,我们有这样的需求:例如有列表的时候,滚动到底部时,需要加载更多。可以采用window的滚动事件进行处理,如果滚动是针对整个屏幕而言的(不针对于某个界面小块),那么这个应该是是成立的

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广