玩转wordpress,seo排名优化什么意思,500套wordpress模板下载,重庆网络安全公司排名需求描述#xff1a;在开发中我们常常会遇到需要让滚动条保持到最底端的需求#xff0c;比如在开发一个聊天框时#xff0c;请求接口拿到消息列表数据#xff0c;展示到前端页面时#xff0c;需要让滚动条自动滚到最底端#xff0c;以此来展示最后的聊天记录。同时#… 需求描述在开发中我们常常会遇到需要让滚动条保持到最底端的需求比如在开发一个聊天框时请求接口拿到消息列表数据展示到前端页面时需要让滚动条自动滚到最底端以此来展示最后的聊天记录。同时当发送一条新的消息时也需要滚动条自动滚动到最底端默认显示到最后一条数据而不是在发送完一条新消息之后还需要手动滑动滚动条到最底端。 主要实现原理
其实这个需求就是需要设置该元素产生滚动条的元素的scrollTop 等于scrollHeight
主要代码
templatediv refbox classbox/div
/templatescript// 滚动到底部scrollToBottom() {// 这里是Vue2的写法const box this.$refs.box as HTMLElementthis.$nextTick(() {box.scrollTop box.scrollHeight})}
/scriptstyle
.box {overflow: auto;height: 446px; /*重要一定要有高度才会生成滚动条*/}/style注意事项
box容器必须设置具体的高度height否则不会产生滚动条如果页面上看有滚动条那可能是父元素产生的滚动条如果没有给box容器设置高度的话这个scrollToBottom方法就不会生效 如果本篇博客对你有帮助请点个赞吧o(▽)
