页面滚动条固定到最底部

最新推荐文章于 2023-10-13 18:34:49 发布
最新推荐文章于 2023-10-13 18:34:49 发布
阅读量1.1k 收藏
点赞数
分类专栏： 小技巧 H5 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dujyong/article/details/108641155
版权
小技巧 同时被 2 个专栏收录
26 篇文章 0 订阅
订阅专栏
H5
10 篇文章 0 订阅
订阅专栏

页面滚动条固定到最底部

项目中遇到的需求,具体可以用来实现 聊天室发送消息后使最后发的消息展示在页面上等, 方法亲测有效

  1. 在想要定位的位置添加一个空的div盒子,给一个绝对定定位,父级盒子记得子绝父相,然后给一个id做标识
<div style="position:absolute" id="onbottom"></div>
  1. 然后在需要定位的时候调用
document.getElementById("onbottom").scrollIntoView();

完成!

你头发乱了喔_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue进入页面时滚动条始终在底部代码实例
10-17
主要介绍了vue进入页面时滚动条始终在底部，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在页面加载的时候，滚动条自动滚到最下面的解决方案
justlikeyou的专栏
08-19 1万+
     在页面加载的时候，滚动条自动滚到最下面的解决方案：1.对于加载之后就不变化的页面，我们可以在页面的最后，在之前插入下面的语句，就可以保证每次都滚动到最下面，在实时中可以实现最新的记录始终在最下面。    window.scrollTo(0,document.body.scrollHeight)      在body中使用load函数是不可行的，因为页面在加载的时候无法确定他的height
【踩坑分享】滚动条保持在最底部的方法，做聊天室的时候会用到
✈ 正在努力 の 寒江（StudiousTiger) ✌ 呐 ✈
03-19 5146
最近在做一个聊天室，结果新发送的消息不能【置于底部】，找了很多方法，最后总结出最完美（主观）的方法，给大家分享一下 核心代码： 目标div.scrollTop = 目标div.scrollHeight; 例子： <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <titl
el-table 横向滚动条固定在可视窗口底部
热门推荐
ZMJ_QQ的博客
04-21 3万+
有一个需求,当el-table的宽度超出浏览器宽度时，虽然el_table底部会出现滚动条，但是每次需要先滚动到底部，才能使用el-table的滚动体，很是麻烦。因此当el_table的宽度超出屏幕宽度时，要在可视范围底部添加一个横向的滚动条，在网上找了四篇不同方法，全都试了一遍，四个方法的原文地址以及效果图我都贴出来了，看个人选择了，我自己用的第二个，一个大佬写的。...
VUE中如何让滚动条保持在最底部（数据实时更新，页面高度随时变化）
旧守一梦的博客
12-16 2万+
先说需求： 数据实时更新渲染到页面 页面高度随数据更新变化 默认页面显示当前更新内容即滚动条处于页面最底部 当用户进行鼠标滚轮向上滚动或者拖动滚动条向上时停止滚动条处于页面最底部操作 当用户进行上一步操作后又向下滚动时 继续让滚动条保持最下 思路： 首先得监听页面的scroll时间并判断是向上或者向下滚动 让滚动条保持在页面最底部 data() { return { oldScrollTop:0, scrollFlag:true,
将滚动条一直置于页面底部最简单的方法
小草莓的博客
09-30 2153
将滚动条所在的盒子的scrollTop设置等于盒子的滚动高度：div.scrollTop = div.scrollHeight
积木&Ruoyi平台滚动条显示优化
jializh的专栏
06-09 3037
搜索区域代码，默认为隐藏： bootstraptable的js中，控制点击搜索按钮时切换select-table的儿子显示/隐藏：
vue 中滚动条始终定位在底部的方法
10-18
今天小编就为大家分享一篇vue 中滚动条始终定位在底部的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
当滚动条滚动到页面底部自动加载增加内容的js代码
01-19
2，相关获取页面高度、滚动条位置、文档高度的函数： 代码如下: //获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { ...
css将div层固定显示在页面底部不随滚动条滚动
12-13
复制代码代码如下:#totop{position:fixed;right:10px;bottom:10px;width:100px;height:100px;}
将滚动条（scrollbar）保持在最底部的方法.html
08-15
将滚动条（scrollbar）保持在最底部的方法.html
CSS控制DIV永远固定在页面底部不随滚动而滚动
09-25
控制DIV永远固定在页面底部的方法有很多，基本上都是通过css或js来实现的，本节也实现了一个这样的效果，大家可以学习下
诺依框架，vue-element-admin，滑动固定根据左侧菜单栏展开闭合自动调整固定位置，监控左侧菜单栏展开与闭合
qq_40247817的博客
09-19 2657
诺依框架，vue-element-admin，滑动固定根据左侧菜单栏展开闭合自动调整固定位置，监控左侧菜单栏展开与闭合问题监控左侧菜单栏的展开与闭合功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 问题 需求场景，需要在诺依框架中，
【若依(ruoyi)】Bootstrap-Table的使用
sayyy的专栏
03-28 2万+
前言 ruoyi 4.6 若依(ruoyi)将 Bootstrap-Table 进行了封装。与原生的 Bootstrap-Table 使用有些区别，但区别不大。 若依(ruoyi)对 Bootstrap-Table 的封装 若依(ruoyi)封装 Bootstrap-Table 的代码在ruoyi-ui.js中。 若依(ruoyi)封装 Bootstrap-Table 的对象为$.table。通过$.table操作 Bootstrap-Table 得到了简化，且支持单页面中包含多个 Bootstrap-
学习日记--隐藏滚动条、滚动条处于底部
轻风细雨_林木木
04-07 215
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .fa{ width: 200px; height: 500px; display: flex; flex-direction: column; } ...
让DIV的滚动条自动滚动到最底部的3种方法
一枚小趴菜(´▽`)ﾉ
02-20 2万+
方法一： 使用锚标记要滚动到的位置，然后通过click方法模拟点击滚动到锚所在位置 <script language="javascript1.2" type="text/javascript"> function onGetMessage(context) { msg.innerHTML+=context; msg_end.click(); } </script> <div style="width:500px;overflow:auto"> <div
【Element-plus】如何让滚动条永远在最底部（支持在线演示）
最新发布
Emily's Blog
10-13 3159
在某些场景下，你可能希望滚动条保持在最底部，以确保用户始终看到最新的内容或信息。通过短短几行代码即可实现这个功能，文章内含实现思路以及支持在线演示。
整理3种常用滚动到底部的方法
Seeyoucm
01-11 8434
滚动到底部的常见需求多来自于消息的聊天对话框 场景一:小程序聊天对话框滚动到底部实现 data: { scrollTop: 10000000 }, getPrivateLetterInfo(){ //在请求数据完成之后,直接设置就好,就可以让对话框滚动条置于底部 this.setData({ scrollTop: 10000000000000 ...
vue element ui 将页面分成两部分，一部分可滚动条滑动，另一个部分始终固定屏幕底部
06-07
可以使用 Vue 和 Element UI 的布局组件来实现将页面分成两部分，其中一部分可滚动条滑动，另一个部分始终固定在屏幕底部。 首先，可以使用 `el-container` 组件作为页面的最外层容器，将页面分成两个部分，如下所示： ```html <el-container> <!-- 可滚动的部分 --> <el-main> <!-- 这里放置可滚动的内容 --> </el-main> <!-- 固定在底部的部分 --> <el-footer> <!-- 这里放置始终固定在底部的内容 --> </el-footer> </el-container> ``` 接着，可以在 `el-main` 组件中添加一个滚动条，使其内部的内容可以滚动，如下所示： ```html <el-main style="overflow-y: auto;"> <!-- 这里放置可滚动的内容 --> </el-main> ``` 最后，可以在 `el-footer` 组件中添加一个固定定位的样式，将其始终固定在屏幕底部，如下所示： ```html <el-footer style="position: fixed; bottom: 0;"> <!-- 这里放置始终固定在底部的内容 --> </el-footer> ``` 这样就可以实现将页面分成两部分，一部分可滚动条滑动，另一个部分始终固定在屏幕底部的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值