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

滚动后使div粘在其容器div的底部

,可以通过以下方式实现:

  1. 使用CSS的position属性和bottom属性来定位div。将容器div设置为相对定位(position: relative),将要粘在底部的div设置为绝对定位(position: absolute),并将其bottom属性设置为0。
代码语言:txt
复制
<style>
.container {
  position: relative;
  height: 400px; /* 容器div的高度,根据实际情况设置 */
  overflow: auto; /* 设置容器div为可滚动 */
}

.sticky-div {
  position: absolute;
  bottom: 0;
}
</style>

<div class="container">
  <!-- 其他内容 -->
  <div class="sticky-div">要粘在底部的div</div>
</div>
  1. 使用JavaScript监听滚动事件,并根据滚动位置动态设置div的定位。这种方式适用于动态改变容器div高度的情况。
代码语言:txt
复制
<style>
.container {
  position: relative;
  overflow: auto;
}

.sticky-div {
  position: absolute;
  bottom: 0;
}
</style>

<div class="container" onscroll="handleScroll(event)">
  <!-- 其他内容 -->
  <div class="sticky-div">要粘在底部的div</div>
</div>

<script>
function handleScroll(event) {
  const container = event.target;
  const stickyDiv = container.querySelector('.sticky-div');
  
  if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
    stickyDiv.style.position = 'relative';
    stickyDiv.style.bottom = 'auto';
  } else {
    stickyDiv.style.position = 'absolute';
    stickyDiv.style.bottom = '0';
  }
}
</script>

以上两种方式可以实现滚动后使div粘在其容器div的底部效果。根据具体需求和使用场景选择合适的方式。

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

相关·内容

CSS粘性定位 - 它真正工作原理!

当它正常工作时,元素会""在一定位置,但在滚动其他部分,它又会停止""住。作为一个每天都在使用CSS的人,作者无法接受自己不能深入理解这个问题根本原因,所以决定深入研究sticky定位。...Stick 探索 在尝试使用 sticky 定位过程中,我很快发现,当一个具有sticky定位样式元素被包裹起来,并且它是包裹元素内唯一元素时,这个被定义为sticky定位元素并不会""住。...Absolute 定位 - 在粘附区域末尾,元素停止并堆叠在另一个元素顶部,就像绝对定位元素在 position: relative 容器行为一样。 贴在底部?...但你也可以使用它将元素粘贴到底部。这意味着可以定义页脚具有粘性位置,并且在向下滚动时始终会出现粘在底部。当我们到达粘性容器末尾时,元素将停留在其自然位置。最好将其用于自然位置为粘性容器底部元素。...position: -webkit-sticky; /* Safari */ position: sticky; 代码部署可能存在BUG没法实时知道,事后为了解决这些BUG,花了大量时间进行

28720

Scroll,你玩明白了嘛?

同时,为了实现平滑滚动,我们在滚动容器上设置了如下 CSS: .scroll-ctn {  display: block;  width: 100%;  height...这显然和 MDN 上描述不一致: Element 接口 scrollIntoView () 方法会滚动元素容器使被调用 scrollIntoView () 元素对用户可见。...使用 {block: "center"},元素在其祖先中间对齐。 使用 {block: "end"},元素在其祖先底部对齐。...使用 {block: "nearest"}: 如果您当前位于其祖先下方,则元素在其祖先顶部对齐。 如果您当前位于其祖先之上,则元素在其祖先底部对齐。 如果它已经在视图中,保持原样。...3、用一个 button 来触发脚本滚动,调用 listScroll 方法,传入容器 ref,想要滚动 scrollTop 以及滚动结束 callback 方法。

3.1K22
  • Web前端实现锚点功能三种方式

    window.location.href='#root'; // window.location.hash='#root'; 二、scrollIntoView Element.scrollIntoView 方法会滚动元素容器...,使元素显示在当前视窗内,用法如 当需要跳转时可调用 document.getElementById('root').scrollIntoView(); scrollIntoView...默认为 "start",元素顶部将滚动到视窗顶部; 取值 "end",元素底部将和视窗底部对齐; 取值 "center",元素中线将和视窗中间对齐; 取值 "nearest",元素将就近对齐。...即,若页面向上滚动,则顶部对齐;若页面向下滚动,则底部对齐。 inline,定义水平方向对齐, "start", "center", "end", 或 "nearest"之一。...以 HTML 根节点为滚动容器为例: 当需要跳转时可调用 const {scrollTop: domScrollTop, scrollLeft: domScrollLeft

    3.5K31

    如何使用 CSS 设置和自定义水平和垂直滚动

    在其他情况下,UI开发人员必须设置滚动条以使用户能够查看超出屏幕或特定容器内容。每个浏览器都有一组默认滚动条样式。在某些情况下,您可能有充分理由来定制滚动条。...从截图中可以看出,侧边栏底部看起来不像设置在底部。这是因为内容比其容器高度长。在下一节中,我们将学习如何防止导航项目列表显示在侧边栏之外。d)....将overflow-y属性值设置为auto,如果没有内容超出容器边界,浏览器将隐藏滚动条。恭喜您!您已成功创建了一个垂直滚动条。如果需要的话,可以休息一下。...将overflow-x属性值设置为scroll可以将水平滚动条添加到容器底部。您网站用户将能够平稳地滚动容器内容。您已成功创建了水平和垂直滚动条。...应用上述样式,最终flexbox容器滚动条应如下所示。

    1.7K00

    建议收藏!总结了42种前端常用布局方案

    > 内容 左列容器开启左浮动 右列容器开启右浮动 使中间自适应宽度为父级容器减去两个定宽列 实现CSS代码如下: .left...如果页面内容不够长时,底部栏就会固定到浏览器底部;如果足够长时,底部栏就后跟随在内容后面。...使用calc函数实现 使用 calc 函数实现方式会比较简单,中间容器最少高度为视口宽度100% - 头部和底部两部分高度即可完成该功能。...Flex方案 实现步骤如下 开启 flex 布局 将子元素布局方向修改为垂直排列 设置最小高度为当前视口,使不管中间部分有多高,始终都可以保持在底部 设置中间部分容器高度为自适应 实现CSS代码如下:...使用calc函数实现 实现步骤如下: 通过 calc 函数计算出中间容器高度。 中间出现滚动容器设置overflow: auto即出现滚动时候出现滚动条。

    4.2K30

    建议收藏!总结了 42 种前端常用布局方案

    > 内容 左列容器开启左浮动 右列容器开启右浮动 使中间自适应宽度为父级容器减去两个定宽列 实现CSS代码如下: .left...如果页面内容不够长时,底部栏就会固定到浏览器底部;如果足够长时,底部栏就后跟随在内容后面。...使用calc函数实现 使用 calc 函数实现方式会比较简单,中间容器最少高度为视口宽度100% - 头部和底部两部分高度即可完成该功能。...Flex方案 实现步骤如下 开启 flex 布局 将子元素布局方向修改为垂直排列 设置最小高度为当前视口,使不管中间部分有多高,始终都可以保持在底部 设置中间部分容器高度为自适应 实现CSS代码如下:...使用calc函数实现 实现步骤如下: 通过 calc 函数计算出中间容器高度。 中间出现滚动容器设置overflow: auto即出现滚动时候出现滚动条。

    4.2K30

    优雅地实现滚动容器遮罩

    在设计前端页面时,常常会遇到这种情况:可滚动容器边界并非父容器边界,导致子元素溢出造成裁切,让页面产生比较怪异视觉效果(左图) 添加遮罩之后,效果自然了许多(右图) 纯色遮罩 以上图这种情况举例...,我们需要做,是在可滚动容器顶部和底部分别放置一个线性渐变纯色遮罩,遮挡生硬裁切线。...position: relative 是行不通,这会导致遮罩跟随容器滚动。...所以需要在可滚动容器外部再嵌套一层 relative 定位元素,使两个遮罩根据其位置定位,最终结构大概是下面这样: <!...蒙版覆盖在可滚动容器之上,需要使用 pointer-events: none; 避免影响滚动操作。 仅适用于父容器为纯色场景,在父容器有透明度、有背景图案或渐变时,遮罩会露馅。

    32110

    CSS | 视差滚动 | 笔记

    引言 视差滚动(Parallax Scrolling)是一种效果, 能够使不同层次元素以不同速度进行滚动, 从而产生了视觉上深度感和动态效果。...滚动 一般指 background-attachment 容器滚动,而背景图不滚动(固定) 视差 一般指 transform: translate3D 引起视差效果, 但有些时候也仅仅用 background-attachment...通过设置transform-style和 perspective,使容器子元素处在3D空间中, 然后设置transform: translateZ使物体在滚动时候在Y轴移动位移不同,产生视觉差。...结果是,当地址栏可见时,屏幕底部部分将被切断,从而破坏了100vh初衷。 如下所示: 当地址栏可见时,由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏, 因此屏幕底部被切断。...在上图中,应该在屏幕底部按钮被隐藏了。 更糟糕是,当用户第一次使用手机访问网站时,地址栏会显示在页面顶部, 因此用户体验是很糟糕

    73321

    html背景图片设置宽高_网页背景图片怎么设置

    在这种情况下,如果图像长宽比与盒子长宽比不同,则可能在图像任何一边或顶部和底部出现间隙。...,背景图不会产生缩放,会被裁切 容器空间大于图片时,在不缩放前提下尽可能多重复图片 当容器空间大于图片时: div{ width: 1000px; height...当下一个图像被添加, 所有的当前图像会被压缩来腾出空间。...它属性值取值有:scroll、fixed、local。 (1)scroll:使元素背景在页面滚动滚动。如果滚动了元素内容,则背景不会移动。...实际上,背景被固定在页面的相同位置,所以它会随着页面的滚动滚动。 (2)fixed: 使元素背景固定在视图端口上,这样当页面或元素内容滚动时,它就不会滚动它将始终保持在屏幕上相同位置。

    5K10

    jQuery 自定义网页滚动条样式插件 mCustomScrollbar 介绍和使用方法

    你可以在这个文件中定义你边栏,当然你可以在其 CSS 文件中定义,要注意是,你要用 CSS 中顺序,其中优先级关系来覆盖这个文件中定义。...:function(){} }:当滚动到顶部时候调用这个自定义回调函数 Demo 同上 callbacks:{ onTotalScrollOffset:Integer }:设置到达顶部或者底部偏移量...");:滚动到顶部(垂直滚动条) $(selector).mCustomScrollbar("scrollTo","bottom");:滚动底部(垂直滚动条) $(selector).mCustomScrollbar...scrollTo",200,{ callback:true }); disable 用法:$(selector).mCustomScrollbar("disable"); 调用 disable 方法去使滚动条不可用...这当然是无法用 Javascript 来实现,因为浏览器是一个容器,Javascript 是容器里面的代码,怎么会把容器修改了呢?当然,有问题就肯定有解决方法。

    14.1K30

    H5C3第四节

    flex-end:各行向弹性盒容器结束位置堆叠。 center:各行向弹性盒容器中间位置堆叠。 space-between:各行在侧轴中平均分布。...--每一个class为sectiondiv都是一屏,section这个类是固定--> 我是内容1 <div class="section...loopTop 滚动到顶部是否连续滚动底部,默认false loopBottom 滚动底部是否连续滚动到顶部,默认false continuousVertical 是否循环滚动,默认为false...paddingTop/paddingBottom 给每一个section设置一个paddingTop或者paddingBottom,默认值为0,如果需要给页面设置一个固定定位头部菜单或者底部菜单时候..., index) 滚动到某一个section,当滚动结束,会触发一次这个回调函数,anchorLink是锚链接名称,index从1开始计算 onLeave(index,nextIndex,diretion

    5.3K30

    8则未必知道且超级实用纯CSS布局排版技巧 | 网易4年实践

    ,千万不要声明overflow:auto让容器自适应滚动,这样做有可能因为其他格式化上下文影响而导致自适应滚动失效或产生其他未知效果。...节点声明display:flex,生成FFC容器里所有子节点高度都相等,因为容器align-items默认为stretch,所有子节点将占满整个容器高度。每列声明flex:1自适应宽度。...由于执行数学表达式返回运算计算值,所以可减少大量人工计算甚至无需人工计算。 calc()饥不择食,所有计量单位都能作为参数参加整个动态计算。...bottom为40px,滚动到距离容器底部40px就固定 第5个:bottom为0px,滚动容器底部就固定 当然,换成left或right也一样能实现横向吸附效果。...由于行内元素在当前行排版产生溢出会自动将其余节点排版到下一行,因此还需声明white-space:nowrap使所有行内元素在一行内排版完毕。若产生滚动条,还需对容器height做适当微调。

    3.3K20

    JS经典案例-无缝滚动轮播图(纯JS)

    引言 在数字化时代洪流中,无缝滚动轮播图作为网页设计常青元素,不仅仅是视觉盛宴开启者,更是用户体验交互艺术展现。...本文将以最基础 HTML+css+JavaScript 来实现一个无缝滚动轮播图案例。...效果图 需求 制作一款无缝滚动轮播图,具备以下特性: 自动无缝滚动切换图片 ️ 鼠标悬停暂停轮播,离开恢复轮播 向左/向右按钮切换图片 底部小圆点指示当前图片并可点击切换 思路 图片容器无缝衔接...-- 复制第一张图片,后面使第一张和最后一张无缝切换 --> 1 ...如何使图片在最后一张时点击下一张,向右滚动切换到第一张 //获取元素 var box=document.getElementsByClassName('box')[0] var

    69010

    收藏 | 移动端H5开发常用技巧总结

    这个事件触发对象是整个 webview 容器容器自然会被拖动,剩下部分会成空白。...如果该元素已经在浏览器窗口可见区域内,则不会发生滚动。 true,则元素将在其所在滚动可视区域中居中对齐。 false,则元素将与其所在滚动可视区域最近边缘对齐。...根据可见区域最靠近元素哪个边缘,元素顶部将与可见区域顶部边缘对准,或者元素底部边缘将与可见区域底部边缘对准。...软键盘唤起,页面的 fixed 元素将失效,变成了 absolute,所以当页面超过一屏且滚动时,失效 fixed 元素就会跟随滚动了。...解决方法: 不让页面滚动,而是让主体部分自己滚动,主体部分高度设为 100%,overflow:scroll <div class='

    4.2K20

    理解CSS布局和块格式化上下文

    [image.png] 在进行html布局及css编写时候,你是否遇到过这样问题: 子元素设置浮动脱离文档流,父元素无法将其完全包裹 子元素浮动实现两栏布局时,另一个子元素与浮动子元素重叠 垂直方向外边距...BFC就是页面上一个隔离独立容器容器里面的子元素不会影响到外面的元素,并且容器元素不会影响兄弟元素布局。...div边距之间没有内容,因此两者将会合并,因此段落最终与框顶部和底部齐平。...设置浮动情况下,我可以通过使右边div成为BFC,使两个兄弟div互相隔离、互不影响,从而达到去除文字环绕效果。...overflow属性,但某些情况下我们不需要滚动条,此时滚动条就变成了这种方式副作用,因此display有个新属性flow-root可以在任何需要创建BFC场景下使用,它并且不会带来任何副作用。

    2.1K30

    【CSS】固定定位 ( 固定定位概念语法 | 固定定位 = 浏览器可视窗口 + 边偏移 | 代码示例 )

    一、固定定位概念语法 ---- 固定定位 是 固定在屏幕中某个位置 , 即使拖动滚动条 , 固定定位元素仍然保持位置不变 ; 固定定位 完全脱离 标准流 , 不占用 布局中位置 , 漂浮在任何元素上方...; 固定定位 只相对于 浏览器可视窗口 进行定位 , 定位方式是通过 " 浏览器可视窗口 + 边偏移 " 进行定位 ; 固定定位 与 父元素没有任何关系 ; 固定定位 与 滚动滚动没有任何关系 ;...⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 ) 代码基础上 , 将中心标准流元素设置为 固定定位 元素 ; 为 body 设置高度 1000px , 方便进行滚动滚动 ;...*/ /* 下边偏移 0 紧贴底部 */ bottom: 0; /* 右边偏移 0 紧贴右侧 */ right: 0; /* 内容尺寸 */ width: 80px...展示效果 : 默认进入样式 : 滚动拖动条效果 :

    1.8K20

    解决Android软键盘弹出覆盖h5页面输入框问题

    之前我们在使用vue进行 h5 表单录入过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下位置...框在wrapper底部),input获取焦点,手机键盘弹出,input未上移到可视区内,怀疑是flex布局导致。...自适应布局,高度跟随屏幕可用高度改变而改变导致。...解决方案: 方案1 页面渲染完成,通过JS动态获取屏幕可视区高度(注:屏幕旋转,需重新获取屏幕高度并赋值),并将其赋值到bodyheight,这样body高度一直都是屏幕高度,当软键盘弹出,...+'px'; 方案2 我们可以借助元素 scrollIntoViewIfNeeded() 方法,这个方法执行如果当前元素在可视区中不可见,则会滚动浏览器窗口或容器元素,最终让它可见,如果当前元素在可视区中

    5.6K30
    领券