vue动态获取不到滚动条高度,vue滚动到指定位置,有滚动效果
vue-scroll的高度设置
(文末是如何设置bar的高度）
问题概述：
最近要做一个滑动的tab列表，列表有两级（两行），第二行需要滑动。整个列表容器设置了高度为88px，每一行设置了高度为44px，但是用了vue-scroll之后，第一行变成了22px多，第二行内容是44px，滚动条还有20px左右。
于是查了一下vue-scroll的设置，有一项是sizeStrategy，默认为‘percent’，即height和width均为100%
所以vue-scroll的高度被设置成了父级的高度88px，这里布局用的flex，按比例缩放了，所以会把第一行挤小，第二行比44px高。
解决办法：
在vue-scrol外边加一层div，并设置高度为44px，这样vue-scroll的高度就是44px*100%=44px了。
注：在tablist处设44px。而在tab处设置不管用。
待解决问题： 试过用tab那个div包裹vue-scroll，vue-scroll里边直接放ul，导致整个页面都是可滑动的。不太懂是什么原因。
tips：
设置bar的高度，直接在bar选项里设置height就行了,默认是6px（设置示例里没有写height，害我试了他写了的好几个属性，然后一气之下直接写了height就好了。。。）
vue 点击路由跳转（地址重复）报错以及路由跳转滚动条未回滚到顶部问题
最近在用vue-cli4 ,, vue3.0开发项目时，遇到了路由跳转时当点击同一个路由地址时就会报错，另一个问题就是路由跳转后记住了上一次页面的滚动条的位置，未回滚到顶部。
好记性不如烂笔头，记录一下，方便以后学习使用
vue中获取滚动高度或指定滚动到某位置
1.点击某个标签，滚动到某个具体位置
? ? switchHeight(num) {
? ? ? ? this.selectNum = num;
? ? ? ? if (num == 0) {
? ? ? ? ? document.getElementById("identifer_one").scrollIntoView();
? ? ? ? } else {
? ? ? ? ? document.getElementById("hotel_two").scrollIntoView();
? ? ? ? }
? ? ? },
2.获取滚动高度，
?首先要先写监听事件：
? mounted() {
? ? ? window.addEventListener("scroll", this.handleScroll, true); //监听滚动事件
? ? },
处理监听事件：e.target.scrollTop是目标对象的滚动高度
handleScroll(e) {
? ? ? ? let serviceTop = 44;
? ? ? ? let hotelTop = 344;
? ? ? ? if (e.target.scrollTop 44 e.target.scrollTop 344) {
? ? ? ? ? this.selectNum = 0;
? ? ? ? }
? ? ? ? if (e.target.scrollTop 344) {
? ? ? ? ? this.selectNum = 1;
?? ? ? ?}
? ? ? }
? ? },
给vue，element-ui中的table添加动态的高度
1.筛选的条件不固定（筛选的高度不固定），数据不多的情况下所加起来的高度不超过页面显示的高度，正常显示；
2.如果数据超多，数据显示的高度加起来超过了当前页面的高度，table出现滚动条，页面不出现滚动条，分页组件依然可以显示
搜索条件
js中封装好的table的高度
将table的高度js文件单独引入页面，或者挂载到全局方法
table中高度的使用
vue滚动条消失
这个情况的出现方式很多，我个人写这个是因为刷新页面后，本来有的滚动条消失了。这个滚动条是我内置设置好页面高度的，正常第一次加载是这样的
超过高度overflow：auto,按道理说应该会有滚动条，可实际情况却没有显示。
这个原因是因为：页面跳转后，body被加上了一个style="overflow: hidden;这是一个bug！！！
解决办法：
第一种：为body设置属性overflow: auto !important;
第二种：用路由设置属性
router.afterEach((to, from, next) = { document.querySelector("body").setAttribute("style", "overflow: auto !important;")});