vue等框架对Tabs、Moda等设置固定高度后没有滚动条问题(vue底部固定中间滑动)墙裂推荐

随心笔谈3年前发布 admin
214 0 0

文章摘要

这篇文章主要讨论了如何在CSS中设置固定高度以显示滚动条,以及在Vue框架下如何解决滚动条位置无法设置的问题。文章提到在CSS中使用`style="height:400px;overflow-y: auto;overflow-x: hidden;"`可以实现滚动条的显示。但在Vue中,直接使用`document.body.scrollTop`无法设置滚动条的高度,需要通过JavaScript的方法来解决,例如通过定位元素并设置滚动条位置。 文章还提到个人在学习过程中遇到的问题,尤其是在使用Vue框架时对滚动条设置的理解不够深入。文章强调了在工作过程中学习和提升个人技术能力的重要性,并鼓励读者通过阅读相关文章来进一步了解和实践。 总的来说,文章通过具体的问题和解决方案,向读者展示了如何在不同技术环境下实现滚动条的固定高度设置,并传达了注重学习和实践的重要性。



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

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

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

以下为我加的位置:

是不是满足您的需求?

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

在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监听页面滚动到某个高度触发事件流程vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作vue移动端监听滚动条高度的实现方法vue中如何动态获取剩余区域的滚动高度

© 版权声明

相关文章