《滚动不到底》debug完整版
大家好啊今天我们一起来调一个 bug
这个是一小伙伴发来demo
我们先把它解压一下
然后呢这是一个
前端项目
我们先把它 npm install 一下
然后我们再用 vscode 打开它
大一点
看一下package
脚本是serve
我们把它跑起来哈
然后我们访问一下
那这是一个移动端的项目
我们把它切成移动端视图
然后呢应该是
这个分类啊他的意思是往下滑动哈
滑动到最下面的时候
没法再滚动了看现在这个效果
导致就是左侧这个菜单没法选中
最后两个
但是，据他描述：为了让它能滚动下去
他在下面加了一个空的div（口误：li）
我们可以用这个 More tools 里边有一个
layers
然后把它缩小一点
我们能看出来其实下边是还有内容
但是感觉上就像是我们滚动上去之后
好像有加 javascript 又给变回来了
所以我们先把 javascript 禁用一下
看一下
哎呀！不行这样的话他就滚动不了了
我们看一下
（overflow）
translateY
大家看我把这 translateY 改成0
然后他就跑到最上面了
然后 translateY 等于 -100
看看他又往下滚一点
所以他这块
滚动的原理应该是用了一个组件
然后这个组件会
监控鼠标的手势
来修改这个 translateY 的值
我们再把 Javascript 启用起来看一下
大家看！这块就变了
所以那这块
我们先把它再禁用一下
然后呢
我们先把 translateY 再改成0
然后他现在滚动不了
肯定是外层这个容器
这个 div 导致的
他没有这个
overflow
我们把它加一个 overflow
auto
大家看！出来了滚动条也出来了
而且他滚动是可以滚动到最下边的
来看一下
那这个空白的 div（口误：li） 就是他加的
这个 div（口误：li）
高度是596
所以
我们先来看一下
这个 div 在哪设置的高度吧
把这个关掉
页面是 sort
然后我们找到这个容器
在这
看他在哪设置的高在这
height 等于
等于这个容器的高度除以1.2
除以1.2相当于83%左右
那他为啥这样呢
itemList 的是哪个
menu-right 看一下啊
menu-right
一个左、一个右
相当于他在最后加的空白的容器...
...的高度是
整个这个高度的80%，啊！
这样的话相当于他就是
即使滚动到最下边
也能上面漏出来一点
所以他弄了个除以1.2
其实相当于乘以0.8
左右也可以
好先不管他我们继续看
然后
他在这设置的高度我们看他这个高度
在哪个方法
这个方法
然后这个方法在在这调用
然后上面初始化
better-scroll
我们把他俩对调一下看一下
刷新
啊！（忘了启用）javascript
刷新
哎可以了
大家看
没问题了
所以他这个应该就是
原来是这样的吗
应该就是他在初始化 better-scroll 的时候
下边那个空白的
容器还没有被添加进来
所以 better-scroll
就认为最高的高度
是不包含下边这块空白的区域的
就下边这块区域
所以我们要
把它对调一下顺序就好了
但是呢我们还是确认一下这个
呃 right height 这里边
除了设置最下边的高度还干啥了
嗯这两块
(itemArray)
获取每一个 cate， cate 是什么
啊这一个分类
一个分类就是1个cate
然后每个分类循环
每个分类的高度
加一个总和
然后把总和
啊这个应该不影响我们
把它放到上面执行也不影响
所以这块
就这样解决一下就行了
把这个高度放上面去初始化
然后再去初始化这个better-scroll
这个组件
这样就没问题了
好今天就到这里谢谢大家
最后更新于