vue 改变div的滚动条位置

最新推荐文章于 2024-08-09 11:20:59 发布

Mr_wuying

最新推荐文章于 2024-08-09 11:20:59 发布

阅读量4.4k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/j244233138/article/details/108695564

版权

vue 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

在vue里要改变div的滚动条

<ul ref="ulScroll1"></ul>

this.$refs.ulScroll1.scrollLeft=15 //距离左  横滚动条
this.$refs.ulScroll1.scrolltop=15 //距离右  竖滚动条

这里会出现一个问题是我们的数据是动态获取的
这里设置了滚动条会没有任何变化
那是因为数据会没有渲染出来滚动条还未出现

解决的办法就是在请求完数据后做一个定时器延迟一下滚动条的设置 100毫秒就可以时间太长的话页面的效果会不太友好

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Mr_wuying

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue 设置滚动条位置

阿豪

02-09

1203

原文链接: vue 设置滚动条位置上一篇: ...

vue 设置滚动条的位置

weixin_37699645的博客

10-26

6705

vue 设置滚动条的位置场景：聊天的时候，消息会一条条的发送，但是呢，获取最新的数据只能手动滚动滚动条，那这个时候就想到微信聊天的时候，永远可以看到最后一条消息。思路：获取div的高度（因为里面是动态的数据）然后，讲滚动条滚动到指定位置代码如下： var div = document.getElementById('data-list-content') div.scrollTop = div.scrollHeight // 如果还是不好用的话，就nextTick一下 this.$nextTic

参与评论您还未登录，请先登录后发表或查看评论

Vue设置滚动条自动保持到最底端

最新发布

Lipn_的博客

08-09

1061

实现滚动条始终保持在最底端

vue项目组件中滚动条无法调整位置解决办法

qq_41590119的博客

06-29

1616

今天做项目遇到的一个问题，普通的HTML里面给滚动条定位的时候，直接是两步走 1、var box=document.getElementById("box"); 2、box.scrollTop=box.scrollHeight; 但是公司项目却是vue项目，所以这样写不生效，在控制台查看scrollTop属性始终是0。最终翻了很多网页终于找到了答案：this.$nextTick 简单的介绍下$nextTick： Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 D

在vue项目页面监听div滚动，和设置滚动值

岁末zzz的博客

04-28

7717

<div ref="Box" @scroll="orderScroll"></div> methods: { // 滚动事件 // 如果不绑定到元素上，则只能监听页面滚动 orderScroll(e){ let a = this.$refs.Box.scrollHeight ...

vue3 实现点击可左右滑动

weixin_40921343的博客

06-24

1500

vue3实现可点击滑动的步骤条

div滚动到指定位置 vue_Vue列表实现滚动到指定位置样式改变

weixin_39940901的博客

12-22

1710

这个需求大概是这样子：我做的一个聊天Demo，在搜索框搜索用户，可以滚动到指定的用户。然后成选中状态。这是目前状态，我搜索南宫仆射，想要下面的用户列表直接滚动到南宫仆射并改变CSS样式。查询之后是这个子：嗯，我的思路：在搜索框搜索到用户之后会返回一个用户对象，之后会调用列表的点击事件，改变CSS样式及做一些聊天的逻辑。然后需要获取到列表对应的id值，直接使用 document.getEl...

vue 中滚动条始终定位在底部的方法

10-18

在使用Vue框架开发前端页面时，经常需要处理列表滚动以及保持滚动条在特定位置的需求。例如，在聊天应用、实时消息...通过这种方法，我们能够有效地解决滚动条位置更新不及时的问题，并保证用户界面的友好性和实时性。

vue进入页面时滚动条始终在底部代码实例

12-11

`mounted`是在组件挂载完成后执行，而`updated`则在每次数据更新后调用，确保无论何时页面内容改变，滚动条都会移动到最底部。 ```javascript export default { mounted () { this.scrollToBottom(); }, ...

vue移动端监听滚动条高度的实现方法

10-18

以上就是使用Vue在移动端监听滚动条高度并根据滚动位置改变元素定位的基本实现方法。这个技巧广泛应用于各种场景，如固定头部、侧边栏或者吸附效果等。希望这个教程能帮助你在开发过程中解决问题，并激发更多的创意...

Vue 中实现 div 在页面滚动后停留在页面固定位置

qq_37237495的博客

10-18

7023

实现效果如下：需要设置的vue组件 <script> export default { // 页面创建钩子函数中添加事件监听 created() { this.listenerFunction() }, methods: { // 事件监听监听页面的 scroll 事件，回调方法为 handleScroll listenerFun...

CSS实现将垂直滚动条放置在左侧方法

这是一个web全栈开发的博客，取其精华去其糟粕，争取让大家一看就懂，一学就会，一用就成~

07-27

5435

前言 滚动条对于大家来说再熟悉不过了，正常情况下都是在页面的右侧显示，今天呢我带大家做一个挑战，实现滚动条在页面左侧显示的效果，当然了，我不是推荐大家在实际项目中使用，因为这不符合正常逻辑，除非需求要求这样做。而我只是想通过这一个左侧滚动条实现为大家提供思路，从而回忆熟悉一下css相关知识点，毕竟时间长了总是会遗忘。接下来实现方式可谓是css的奇淫技巧，而web是一个很大的地方，有着不可知的情况，有时需要奇怪的解决方案。技巧一：定向方法这里的诀窍是让滚动的父元素使用direction:rtl（

vue设置滚动条

热门推荐

weixin_43549003的博客

11-30

1万+

如何在vue中设置滚动条呢？首先需要写一下css样式 <div :style="{'max-height': this.timeLineHeight + 'px' }" style="overflow-y:scroll;" > </div> 在这个div中，放的是你写的前端代码。它是可以滚动的。在mounted中改变最大高度的大小。这个减210，它减的是我标头的高度，你的具体高度需要根据实际情况来减。 mounted() {

vue3关于滚动条的应用

dh99999900的博客

12-03

1618

vue3关于滚动条的详细应用

vue3 +Element-plus ,使用ref修改scrollTop 到指定位置

qq_45913170的博客

11-29

1737

【代码】vue3 +Element-puls ,使用ref修改scrollTop 到指定位置。

vue3 +Element-puls ,table 中使用$refs修改scrollTop 到顶部

weixin_39475476的博客

12-09

3014

const elTableRef = ref(); //表格id

vue3之中div盒子的滚动条随着内容的增加而自动向下滚动

wsdnnnnnnnnn的博客

05-12

2233

思路：需要用到ref绑定dom元素，以及dom元素的scrollTop和scrollHeight属性，最终在onUpdated函数之中让scrollTop和scrollHeight两者相等即可。scrollTop：指的是滚动条卷去的距离（滚动条向下滚动之后距离顶部的距离）scrollHeight：指的是内容的高度。

Vue的滚动条-vue-happy-scroll用法

huanhuan03的博客

01-09

6300

vue-happ-scroll vue滚动条用法

vue滚动条设置及美化

weixin_43937851的博客

06-15

8039

滚动条设置、美化

vue 滚动条滚动到指定位置改变样式

09-06

使用Vue中的`refs`属性可以获取到指定DOM元素的引用，并通过改变元素的样式来实现滚动条滚动到指定位置改变样式的效果。首先，在需要滚动的元素上添加`ref`属性，并设置一个名称，如`scrollDiv`。 ```html <template> <div class="container"> <div class="scroll-wrapper" ref="scrollDiv">  </div> </div> </template> ``` 然后，在Vue组件的`methods`属性中定义一个方法，该方法用于改变滚动条位置和样式。在这个方法内部，我们通过`this.$refs.scrollDiv`来获取到指定的滚动元素。 ```javascript <script> export default { methods: { scrollTo(position) { this.$refs.scrollDiv.scrollTop = position; // 根据需要设置其他样式 // this.$refs.scrollDiv.style.color = 'red'; } } } </script> ``` 接着，在需要触发滚动的事件处调用该方法。可以使用`@click`、`@scroll`等事件来触发滚动。 ```html <template> <div class="container"> <div class="scroll-wrapper" ref="scrollDiv" @click="scrollTo(100)">  </div> </div> </template> ``` 在上述代码中，点击滚动元素时会触发`scrollTo`方法，将滚动元素的滚动条位置滚动到100px的位置，并可以根据需要进一步设置其它样式。以上就是一种使用Vue实现滚动条滚动到指定位置改变样式的方法。（注意：以上代码只是简单示例，具体实现可能需要根据实际情况进行适当的调整。）