vue实现滚动条到顶部或者到指定位置

目录
  • vue滚动条到顶部或到指定位置
  • vue设置滚动条
    • vue如何在div中设置滚动条呢？

vue滚动条到顶部或到指定位置

首先在 html 里面给你要滚动的元素设置属性 ref='box' 这就相当于是DOM操作了 ，

然后 根据 属性名找到则个元素就可以操作啦

vue设置滚动条

vue如何在div中设置滚动条呢？

首先需要写一下css样式

<div
    :style="{'max-height': this.timeLineHeight + 'px' }"
    style="overflow-y:scroll;"
 >            
</div>

在这个div中，放的是你写的前端代码。它是可以滚动的。

在mounted中改变最大高度的大小。这个减210，它减的是我标头的高度，你的具体高度需要根据实际情况来减。

mounted() {
    this.timeLineHeight = document.documentElement.clientHeight - 210;
    window.onresize = () => {
      this.timeLineHeight = document.documentElement.clientHeight - 210;
    };
  },

在data中声明一下属性

 data() {
    return {
      timeLineHeight: "",
    }
  }

这样就可以了！

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue列表如何实现滚动到指定位置样式改变效果

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

  • vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作

    template里面: <!-- tab切换star --> <ul class="tab-list" :class="{fixTitle:whether}"> <li @click="curId=0" :class="{'cur':curId===0}">产品特点</li> <li @click="curId=1" :class="{'cur

  • vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

    有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 x 坐标. ypos:必需.要在窗口文档显示区左上角显示的文档的 y 坐标. 例如滚动内容的坐标位置100,500: window.scrollTo(100,500); 好了,这个scrollTop这儿只是简单介绍一下,下面我们介绍下veu-router中的滚动行为. 使用前端路由,当切换到新路由

  • 解决Vue页面固定滚动位置的处理办法

    最近做项目遇到一个问题,就是Vue滚动不固定,网上找了一些资料,说下 vue 固定滚动位置的处理办法. 问题描述: 通常见于 列表页List -> 详情页Detail 的情况, 从列表的某一项x 进入到详情页, 再返回的时候, 希望列表的位置固定在x, 而不是回到顶部了. vue-router 里面是有一个 scrollBehavior 的, 但是这个玩意只能在 history 模式下面使用, 而我用的 hash 模式. 所以我们要自己实现嘛, 思路简单:List 里面监听滚动, 记录滚动位置

  • vue实现滚动条到顶部或者到指定位置

    vue实现滚动条到顶部或者到指定位置

    目录 vue滚动条到顶部或到指定位置 vue设置滚动条 vue如何在div中设置滚动条呢? vue滚动条到顶部或到指定位置 首先在 html 里面给你要滚动的元素设置属性 ref='box' 这就相当于是DOM操作了 , 然后 根据 属性名找到则个元素就可以操作啦 vue设置滚动条 vue如何在div中设置滚动条呢? 首先需要写一下css样式 <div     :style="{'max-height': this.timeLineHeight + 'px' }"     sty

  • Vue引入jquery实现平滑滚动到指定位置

    在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问题的,之前参考了一位博主的想法:通过在一定时间内定时分步长滚动,连续起来后肉眼观察就是平滑滚动的效果(点击查看),当时看到这篇文章我是心花怒放,赶紧参考代码写进去,然并卵...根本没有效果,后来联系博主讨论后得出结论可能是我的vue2.4版本对计时器不友好,建议我降版本,这样的话...我还是继续研究

  • 基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效

    基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效

    实现目标 浏览各大云平台,发现一个页面特效使用较为频繁,以"百度云"为例(https://cloud.baidu.com/),进入百度云后,当滚动条滚动至"更可靠的数据支持"模块时,页面数据将会开始滚动式增长特效.下面将会介绍我的解决方案,希望有同行更好的解决方案大家一起交流. 解决思路 主要的解决要点如下: 如何实现数字动画的效果 如何监听滚动条到指定的位置 分解要点寻找解决思路: 一.如何实现数字动画的效果 在vue的官方文档(https://cn.vuejs.

  • vue切换页面(路由)时如何保持滚动条回到顶部

    目录 vue切换“页面”(路由)时保持滚动条回到顶部 vue页面跳转后,滚动条不在顶部的解决 问题描述 解决方法 vue切换“页面”(路由)时保持滚动条回到顶部 vue项目做pc端的时候,发现在两个页面切换时 滚动条没有回到顶部而是保持原先的位置: 这是由于vue是单页面应用,只是更换了路由内容,还在当前页面滚动条是不会回到顶部的. 解决办法是在切换路由的时候,将滚动区域的滚动条复位为0.   // 使用 watch 监听$router的变化,   watch: {     '$route':

  • vue控制滚动条滑到某个位置的方法实例

    目录 一.关于web开发的各种高度的计算介绍 二.回到页面顶部实现方法 1.  元素中绑定ref 2.   浏览器回到页面顶部 window.scrollTo(0,0),页面滚动 3.使用el-pagination实现翻页自动回到顶部 三.总计一下今天学到的新知识 (1)watch监听属性变化函数 (2)computed和watch之间的区别: 补充:vue平滑滚动到指定位置 总结 一.关于web开发的各种高度的计算介绍 设置当前滑动到的距离 语法一:window.scrollTop(x,y) 

  • JS滚动到指定位置导航栏固定顶部

    最近整理一下之前做的一个项目,把滚动条动态固定顶部的代码整理出来和大家分享,上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js滚动到指定位置导航栏固定顶部</title> <style type="text/css"> body{height: 2500px; margin: 0; padding: 0

  • vue的滚动条插件实现代码

    vue的滚动条插件实现代码

    这篇文章主要介绍了vue的滚动条插件实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果如下 代码如下 <template> <div class="vue-scroll" ref="vueScrollW"> <div class="vue-scroll-w" ref="vueScroll" > <div class=&quo

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

    滚动条定位在底部,首先想到的是,动态修改滚动条到顶部的距离等于div的高度, 代码实现: var div = document.getElementById('data-list-content') div.scrollTop = div.scrollHeight 但是问题来了,滚动条并没有到达底部,而是距离底部还有一点距离(一脸懵逼) 估计是动态加载数据时,数据还未加载,滚动条就已经执行,知道原因了,那就实践呗. 第二次尝试,利用vue的watch监控数据的改变,然后动态修改滚动条到顶部的距离

  • Vue滚动页面到指定位置的实现及避坑

    目录 Vue滚动页面到指定位置 方法1 方法2 方法3 避坑指南 滚动页面到一定距离后固定 Vue滚动页面到指定位置 在Vue中,有三种方式可以实现H5页面滑动至指定位置 方法1 //先获取目标位置距离 mounted() {   this.$nextTick(() => {      setTimeout(() => {         let targetbox= document.getElementById('targetbox');         this.target= targ

随机推荐