vue等框架对Tabs、Moda等设置固定高度后没有滚动条问题

 更新时间:2023年05月13日 11:13:37   作者:鼠年大吉  
这篇文章主要介绍了vue等框架对Tabs、Moda等设置固定高度后没有滚动条问题,解决方法很简单,只需要一行简短代码就可以解决,下面小编给大家详细讲解,需要的朋友可以参考下

vue等框架对Tabs、Moda等设置固定高度后没有滚动条

当弹窗不设置高度时,界面会根据内容自动扩充高度,内容过长时会非常难看,需要设置固定高度,当超出这个高度后悔出现滚动条。效果如下图:

其实很简单,在你需要控制高度的地方加上一行代码

style="height:400px;overflow-y:auto;overflow-x:hidden;"

以下为我加的位置:

是不是满足您的需求?

补充:vue 解决无法设置滚动位置的问题

问题描述

在实现锚点定位的时候发现无法设置滚动条的位置。

在Vue中,使用 document.body.scrollTop=952 无法设置滚动条的高度。

document.body.scrollTop一直是0

原因

因为vue的页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement。

页面没有DTD,即没指定DOCTYPE时,使用document.body。

解决方案

document.documentElement=956

2018年10月10号新增

上面仅仅是说这个页面的滚动条高度的设定,当我页面内的一个div的滚动条设定他的高度 如下解决方案

var anchor = this.$el.querySelector('.message-list')
      this.$nextTick(() => {
        document.querySelector('.message-list').scrollTop = anchor.scrollHeight
 })

这个解决方案在我做ng的时候又出现过类似的问题,我前大佬告诉我的 ,当时只是为了解决问题并没有了解其原理,复制进来就过去了。

现在做vue了,才知道哦,为什么要这样写,所以说项目太赶,只是为了完成任务,对个人能力并没有提升,做完了就过了, 还要解决其他的bug,其他的任务,现在能够静下来在工作过程中学习+进步,对个人的发展才是好的。工作不仅仅是工作完成任务,是一个自己发现自身问题,提升能力和对自己的技术实操实践的过程。

到此这篇关于vue等框架对Tabs、Moda等设置固定高度后没有滚动条的文章就介绍到这了,更多相关vue设置固定高度没有滚动条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 编写 Vue v-for 循环的 7 种方式

    编写 Vue v-for 循环的 7 种方式

    这篇文章主要分享可编写 Vue v-for 循环的 7 种方式,在Vue中,基本上每个项目都会用到v-for循环。它们允许你在模板代码中编写for循环,接下来一起看看下面文章的详细介绍吧

    2021-12-12
  • vue路由跳转了但界面不显示的问题及解决

    vue路由跳转了但界面不显示的问题及解决

    这篇文章主要介绍了vue路由跳转了但界面不显示的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue中的require使用

    vue中的require使用

    require是node中的一个方法,他的作用是用于引入模块、 JSON、或本地静态文件,这篇文章主要介绍了vue中的require使用,需要的朋友可以参考下
    2023-08-08
  • Vue使用轮询定时发送请求代码

    Vue使用轮询定时发送请求代码

    这篇文章主要介绍了Vue使用轮询定时发送请求代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue开发心得和技巧分享

    vue开发心得和技巧分享

    这篇文章主要为大家分享了vue开发心得和技巧,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • vue中使用gojs/jointjs的示例代码

    vue中使用gojs/jointjs的示例代码

    这篇文章主要介绍了vue中使用gojs/jointjs的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 手写Vue内置组件component的实现示例

    手写Vue内置组件component的实现示例

    本文主要介绍了手写Vue内置组件component的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • 在vue中利用v-html按分号将文本换行的例子

    在vue中利用v-html按分号将文本换行的例子

    今天小编就为大家分享一篇在vue中利用v-html按分号将文本换行的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue用v-for给src属性赋值的方法

    Vue用v-for给src属性赋值的方法

    下面小编就为大家分享一篇Vue用v-for给src属性赋值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 在vue中动态添加class类进行显示隐藏实例

    在vue中动态添加class类进行显示隐藏实例

    今天小编就为大家分享一篇在vue中动态添加class类进行显示隐藏实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论