首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当滚动到父div的高度时,限制固定的sub的高度

可以通过以下步骤实现:

  1. 首先,需要使用CSS来设置父div和sub的样式。父div应该具有一个固定的高度,并且需要设置overflow属性为scroll或auto,以便在内容溢出时出现滚动条。sub应该具有一个固定的高度,以便在滚动时限制其高度。
代码语言:css
复制
.parent-div {
  height: 400px; /* 设置父div的固定高度 */
  overflow: auto; /* 设置溢出时显示滚动条 */
}

.sub {
  height: 200px; /* 设置sub的固定高度 */
}
  1. 接下来,需要使用JavaScript来监听父div的滚动事件,并在滚动到一定高度时限制sub的高度。可以使用addEventListener方法来添加滚动事件监听器。
代码语言:javascript
复制
var parentDiv = document.querySelector('.parent-div');
var sub = document.querySelector('.sub');

parentDiv.addEventListener('scroll', function() {
  var scrollTop = parentDiv.scrollTop; // 获取父div的滚动高度
  var limitHeight = 300; // 设置限制高度

  if (scrollTop >= limitHeight) {
    sub.style.height = limitHeight + 'px'; // 限制sub的高度
  } else {
    sub.style.height = ''; // 恢复sub的原始高度
  }
});

在上述代码中,我们设置了一个限制高度(limitHeight),当父div的滚动高度(scrollTop)超过限制高度时,将sub的高度设置为限制高度;否则,恢复sub的原始高度。

  1. 最后,根据具体的应用场景和需求,可以选择适合的腾讯云产品来支持云计算和相关功能。以下是一些可能适用的腾讯云产品:
  • 云服务器(CVM):提供可扩展的计算能力,用于部署和运行应用程序。
  • 云数据库MySQL版(CDB):提供可靠的关系型数据库服务,用于存储和管理数据。
  • 云存储(COS):提供安全可靠的对象存储服务,用于存储和管理大量的非结构化数据。
  • 人工智能机器学习平台(AI Lab):提供丰富的人工智能算法和工具,用于开发和部署机器学习模型。
  • 物联网通信(IoT Hub):提供稳定可靠的物联网设备连接和数据传输服务,用于构建物联网应用。

以上是一些可能适用的腾讯云产品,具体选择应根据实际需求和项目要求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 实现滚动Header自动隐藏

    这是掘金网页版头部,滚动条向下滑动,主header会隐藏,次级header会吸在页面顶部。...; position: fixed; top: 50px; } 这里使用绝对定位来将两个header固定在页面顶部,这两个div分别是main-header和sub-header...你可能会发现在这段代码上面,还有一段不明所以代码: if (topArrived) { isHidden.value = false return } 滚动条到顶部,直接显示header...前者,可以通过判断y值是否为0(或小于0)来实现;而后者,正常来说,滚动到底部,文档高度-视窗高度应该和滚动条y值是一致。...但是在safari里可能不一致,在safari中,当地址栏收缩,上文公式成立;但是当地址栏是展开状态,两者会一个相差地址栏高度。而地址栏是否展开我没找到判断方法。

    2.3K30

    css布局使用

    宽度都相同,其一般不会占满浏览器最宽宽度,但浏览器宽度缩小低于其最大宽度,宽度会自适应。...> .layout { /* width: 960px; */ /*设置width浏览器窗口宽度小于960px,单列布局不会自适应。...浏览器窗口宽度小于960px,单列布局不会自适应。...与上一种方法相比,本种方法是通过定位来实现侧栏位置固定。 如果中间栏含有最小宽度限制,或是含有宽度内部元素,则浏览器窗口小到一定程度,主面板与侧栏会发生重叠。...通过负边距将浮动侧栏拉上来,左侧栏负边距为100%,刚好是窗口宽度,因此会从主面板下面的左边跑到与主面板对齐左边,右侧栏此时浮动在主面板下面的左边,设置负边距为负自身宽度刚好浮动到主面板对齐右边

    1.9K90

    Web 技术:CSS最小和最大(宽度高度)知识点及优缺点

    min-width和max-width都用于一个元素,它们中哪一个将覆盖另一个?换句话说,哪个优先级更高?...html css .sub { width: 100px; min-width: 50%...标签列表 有一个标签列表,建议限制一个标签最小宽度,这样如果它内容很短,它外观就不会受到影响。 ? 通过具有这种灵活性,无论内容有多短,标签都将看起来不错。...使用 flexbox 将最小宽度设置为零 min-width默认值是auto,它被计算为0。一个元素是一个flex 项,min-width值不会计算为零。...Hero 元素最小高度 一般来说,我不喜欢给元素添加固定高度。我觉得这样做,会破坏流式布局结构。但有些情况设置固定高度却很有用。 考虑下面的例子,在这里我们有一个设置了固定高度hero部分。

    6K20

    【CSS】绝对定位元素设置 水平 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )

    一、问题提出 ---- 绝对定位 不能通过 设置 margin: auto; 样式方式 , 设置盒子模型水平居中 ; 相对定位 盒子模型 , 并没有脱离标准流限制 , 仍然可以使通过设置 margin...: auto; 样式方式 令盒子水平居中 ; 举例说明 : 绝对定位 元素 需要居中对齐地方很多 , 如下图所示 , 右侧 固定定位 按钮 , 需要在浏览器中居中对齐 , 轮播图中 五个小圆点...容器需要居中对齐 ; 二、绝对定位 居中设置 ---- 1、设置固定尺寸 使 绝对定位 元素 水平 / 垂直 居中 最简单方法就是 使用标尺测量容器宽高 , 通过设置四个边边偏移量 , 设置元素...水平 / 垂直 居中 ; 2、先偏移50%再回退固定容器 盒子 如果尺寸发生了改变 , 使用上述固定边偏移方式设置居中就会出现问题 ; 先设置 50% 宽度 / 高度 偏移量 , 然后再往回退...盒子一半 宽度 / 高度 偏移量 ; 以 水平居中为例 : 200 x 200 大小盒子 , 通过设置 首先 , 设置 left 左边偏移为 50% , 让子元素左侧 移动到 容器水平中心位置

    1.9K40

    分享 1个原生 JS 瀑布流案例

    由于未知 css 知识点,丝袜最长妹子把下面的空间都占用掉了。 接着正文,假如如上图,每排有 5 列,那第 6 张图片应该出现前 5 张图片哪张下面呢?...pointer = this.getMinPointer(perList) } } 细心朋友也许发现了代码中获取图片高度用到了offsetHeight 这个属性,这个属性高度之和等于图片高度...,效果图如下: scroll、resize 事件监听实现 实现了初始化函数 init 以后,下一步就要实现对 scroll 滚动事件进行监听,从而实现滚到节点底部有源源不断图片被加载出来效果...这时候要考虑一个点,是滚动到什么位置触发加载函数呢?...这个因人而异,我做法是满足 容器高度 + 滚动距离 > 最后一张图片 offsetTop 这个条件,即橙色线条 + 紫色线条 > 蓝色线条触发加载函数,代码如下: window.onscroll

    1.9K20

    原生 JS 实现一个瀑布流插件

    由于未知 css 知识点,丝袜最长妹子把下面的空间都占用掉了。。。 接着正文,假如如上图,每排有 5 列,那第 6 张图片应该出现前 5 张图片哪张下面呢?...pointer = this.getMinPointer(perList) } } 细心朋友也许发现了代码中获取图片高度用到了 offsetHeight 这个属性,这个属性高度之和等于图片高度...,效果图如下: scroll、resize 事件监听实现 实现了初始化函数 init 以后,下一步就要实现对 scroll 滚动事件进行监听,从而实现滚到节点底部有源源不断图片被加载出来效果...这时候要考虑一个点,是滚动到什么位置触发加载函数呢?...这个因人而异,我做法是满足 容器高度 + 滚动距离 > 最后一张图片 offsetTop 这个条件,即橙色线条 + 紫色线条 > 蓝色线条触发加载函数,代码如下: window.onscroll

    2.4K40

    clientWidth,offsetWidth,scrollWidth你分清吗

    不包括margin元素高度。...对于inline元素这个属性一直是0 offsetTop/offsetLeft/offsetRight/offsetBottom: 代表元素距离级元素相对距离,但是级元素需要具有relative...,这个只针对dom子元素出现溢出情况,才有效果,不然它始终和clientHeight相等 scrollTop 代表在有滚动条,滚动条向下滚动距离也就是元素顶部被遮住部分高度。...注意:元素溢出浏览器视口,值会变成负数。...大概是这样 实现思路就是,去拿到选中元素clientHeight和offsetTop,并和列表高度区间做比较,计算出元素是在列表视口内部,还是溢出视口,如果溢出了视口,那么就回

    2K10

    详解DOM对象中clientWidth、offsetWidth等属性

    2、如果当前元素级元素中有CSS定位(position为absolute或relative),offsetParent取最近那个级元素。...输出: div#content添加定位position:reletive;样式,并将tagName换为id 输出: 四、offsetTop和offsetLeft offsetTop和offsetLeft...我们为上面代码div#content添加一个子元素div#sub1 并添加样式(说明以下,div#sub-content高度被我改成了50px) 演示图如下 可以知道,div#sub-content...不存在水平或垂直滚动条,scrollWidth和scrollHeight等于clientWidth和clientHeight, 存在水平或垂直滚动条,请看下面演示(将div#sub-contetn...)+300(div#sub-content height)=400 可以看出来其实scrollWidth和scrollHeight等于clientWidth和clientHeight还是有很大联系内容层高宽度超过指定元素高宽度

    2.3K20

    你也许不知道浏览器一些滚动行为

    分类 按照我个人理解,滚动分全局滚动(浏览器窗口)跟局部滚动(自定义盒子),以下内容绝大部分都是指全局滚动,局部滚动的话获取指定DOM再调用相应API即可✅ 如何设置全局滚动条高度 1....设置滚动条高度 window.scrollTo(0, offsetTop); 效果如下: 2....或者用锚点: 盒子出现在顶部 效果如下: 3....函数节流 当你没加函数节流: window.addEventListener("scroll", () => console.log("我在我在!"))...滚动传播 指有多个滚动区域,一个滚动区域滚动完之后,继续滚动会传播到到区域继续滚动行为: .box { overscroll-behavior: contain; // 阻止滚动传播 } 对比效果图如下

    3K20

    JS事件篇

    整合上面操作小案例 节点.insertBefore(新节点,旧节点): 在指定子节点前插入新子节点 节点.replaceChild(新节点,旧节点): 使用指定子节点替换已有的子节点 节点...和scrollTop获取水平和垂直滚动条滚动滚动距离 满足scrollHeight - scrollTop == clientHeight,表明垂直滚动条滚动到底了 阅读知情同意书小案例 onmousemove...---- 元素.clientHeight和元素.clientWidth获取元素可见宽度和高度—只读,无法修改 不包括边框 ---- 元素.offsetWidth和元素.offsetHeight—获取元素整个宽度和高度...} 满足scrollHeight - scrollTop == clientHeight,表明垂直滚动条滚动到底了 ---...绑定一个鼠标松开事件,当鼠标松开时候,obj位置固定 documnet.onmouseup=function() { alert("hhh");

    12.6K10

    让剁手党洞察物体细节,“放大镜”当之无愧

    2、涉及到主要知识 offsetLeft: 获取当前对象与元素左距离 offsetTop: 获取当前对象与元素上距离 offsetWidth: 获取元素(含边框)自身宽度 offsetHight...: 获取元素(含边框)自身高度 scrollLeft: 获取元素距离 scrollTop: 获取元素距离 event.clientX: 元素X坐标 event.clientY: 元素Y坐标...当鼠标移动到原图上,通过对大图进行位置控制来显示对应部位。 2....当鼠标移动到box上方,move块将显示,同时在放大区中显示大图对应位置,所以我们在这里需要使用mousemove事件监听,当我们鼠标移入box,就需要获取当前鼠标的相对坐标位置。...- (mov.offsetWidth / 2); //获取移动move块距顶部距离 4.临界值判断,move移动距离超出了box范围,需要限制其最大移动值与最小移动值。

    1.3K80

    动手练一练,手写一个价格对比、固定表头滚动表格

    今天我们将通过一个界面十分漂亮功能价格对比表格,展示固定表头功能,实例操作展示如视频所示,滚动条滚动至表格位置,添加表头固定样式,滚动至表格底部,移除固定表头样式。...scrollHeight: 因为子元素比元素高,元素不想被子元素撑一样高就显示出了滚动条,在滚动过程中本元素有部分被隐藏了,scrollHeight代表包括当前不可见部分元素高度。...scrollTop: 代表在有滚动条,滚动条向下滚动距离也就是元素顶部被遮住部分高度。在没有滚动条scrollTop==0恒成立。单位px,可读可设置。...获取用户从视口顶部滚动距离(pageYOffset) 获取最后一部分内容区域距离窗口顶部高度(getBoundingClientRect().top) 检测滚动条是否滚动到表格区域。...如果滚动到表格区域,获取重置后表头宽度。 接下来我们来判断第三部分内容区域距离视口顶部高度是否大于表头高度

    3.2K31

    mini react-window(一) 实现固定高度虚拟滚动

    我们在平常开发中不可避免会有很多列表渲染逻辑,在 pc 端可以使用分页进行渲染数限制,在移动端可以使用下拉加载更多。...固定高度场景这种场景中我们已知每一项渲染高度,可以根据渲染个数计算出整体高度,我们只需要对可是区域内渲染进行渲染计算即可。...实现 FixedSizeList 组件我们要注意我们没有直接写, react-window 提供了固定高度固定等几种虚拟滚动场景,但是对于包裹元素来说基本都是一致,只是具体场景元素处理有不同...,所以我们仿照官方库,先提供一个组件,其他具体场景实现都是基于该组件实现,这种形式也就是我们说高阶组件,就是这里 createListComponent。...,所以可知内容高度可以直接计算,但是其他固定高度场景不能够复用,所以这里我们使用传入方式;同时每一项样式高度和 top 值也是需要具体场景单独计算。

    1.9K51
    领券