js 滚动条自动滚动到最底部

这篇具有很好参考价值的文章主要介绍了js 滚动条自动滚动到最底部。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简介:

        功能简介,js 滚动条自动滚动到最底部

效果展示:

js 滚动条自动滚动到最底部

核心代码:

window.scrollTo(0, document.body.scrollHeight);

代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
	</head>
	<body>
		<div class="panel-body" style="flex-grow: 1; overflow-y: auto; background-color: #343541; color: white;">
		</div>
		<div style="position: sticky; bottom: 0;">
			ceshi
		</div>
		<script>
			setInterval(function() {
				$(".panel-body").append("123456<br>" + new Date());
				scrollBoxFun();
			}, 100)

			function scrollBoxFun() {
				window.scrollTo(0, document.body.scrollHeight);
			}
		</script>
	</body>
</html>

代码示例2:文章来源地址https://www.toymoban.com/news/detail-503925.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
	</head>
	<body>
		<div class="card" style="height: 100vh;">
			<div class="panel-body" style="flex-grow: 1; overflow-y: auto; background-color: #343541; color: white;">
			</div>
			<div style="position: sticky; bottom: 0;">
				ceshi
			</div>
		</div>
		<script>
			setInterval(function() {
				$(".panel-body").append("123456<br>" + new Date());
				scrollBoxFun();
			}, 100)

			function scrollBoxFun() {
				window.scrollTo(0, document.body.scrollHeight);
			}
		</script>
	</body>
</html>

到了这里,关于js 滚动条自动滚动到最底部的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue 实现 dragover拖拽到页面底部时元素自动向下滚动

    公司要求做一个类似于企业微信的日程功能 然后呢 日程组件 需要能拖拽时间段创建 这里 我们使用 dragstart+dragend+dragover 记录被拖动位置完成的 如果没接触过 可以查看我的文章 vue记录鼠标拖拽划过位置并将划过位置变色 这里的话 其实可以在@dragover中做操作 界面上 @dragove

    2024年02月07日
    浏览(43)
  • vue 切换路由页面时,滚动条滚动到最上面

    vue项目里,使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。 第一种方法: 可以参考vue官方写法: https://router.vuejs.org/zh/guide/advanced/scrol

    2024年02月16日
    浏览(31)
  • wpf控制垂直滚动条到最上方

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 wpf项目中有个datagrid列表,当数据出现垂直滚动条时拉倒最下方,现在当数据刷新时需要自动返回到数据最上方。 提示:以下是本篇文章正文内容,下面案例可供参考 控制部分(加在需要滚动的地方) 获

    2024年02月16日
    浏览(31)
  • element-ui table表格滚动条拉到最右侧 表头与内容不能对齐

    1.问题概述 当表格数据太多,会出现纵向滚动条和横向滚动条,把横向滚动条拉到最右侧时,会出现表头与内容不能对齐的现象。 2.解决方法 1.当页面数据加载完毕后,在后面加上 2.别忘了给表格加上ref属性

    2024年02月10日
    浏览(41)
  • 原生JS轮播图+自动播放+按钮切换+鼠标经过暂停+底部圆点切换

    手搓一个原生的JS轮播图,HTML部分就随意写了一点,重点的逻辑还是在JS中,可以实现自动播放banner图片,还有按钮点击切换banner和底部小圆点,点击底部小圆点可以切换banner图等功能,先上个图吧,是不是很丰富`_`  先放 JS部分 的代码吧,主要用到了点击事件、定时器等技

    2024年02月06日
    浏览(52)
  • JS动态计算自动滚动距离

    在HTML部分,通过Vue的指令 v-for 循环生成了20个表格项,每个表格项的样式根据其奇偶性设置为不同的类名。 在Vue实例中,定义了一个名为 startAnimation 的方法,用于计算并设置动画效果。 startAnimation 方法首先获取表格容器的高度和所有表格项的高度,然后根据高度差判断是否

    2024年02月10日
    浏览(35)
  • 【JS】设置滚动属性默认自动滚动到底部(overflow:scroll;)

    设置滚动属性默认自动滚动到底部: 场景:实现对话框,默认展示最新的对话内容 react 实现: 所需用到的css样式

    2024年02月07日
    浏览(41)
  • 小程序弹幕自动滚动实时更新数据功能

    需求 最近遇到的需求,写一个弹幕功能 大致就是实现这样的效果 弹幕轮播,上下两排,一共30个弹幕,30个轮播完毕之后获取新的弹幕数据 实现方法  目前我想到的实现方法是用css的动画来实现这个功能 布局层级 给barrageBox盒子一个相对定位 给barrageList绝对定位 先将list盒子

    2024年01月20日
    浏览(46)
  • vue 滚动条滚动到顶部或者底部

    1:在滚动条所属 div 上加上 ref=“mianscroll” (mianscroll名称随意起) 2:点击事件到顶部 3:点击事件到底部 注意点:一定要是给滚动条所属 div 添加如上方法,不然无法生效,滚动的 div 的样式是 overflow:auto

    2024年02月11日
    浏览(38)
  • css样式-内容固定在页面底部,不随滚动条滚动

    目录 1、内容固定在页面底部,不随着滚动条滚动 2、添加内容,简单测试是否固定  position:                 1、【relative】相对定位;2、【absolute】绝对定位;                  3、【fixed】固定定位;4、【static】默认值;5、【sticky】粘性定位。 这里设置为fixed,

    2024年02月11日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包