《滚动不到底》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

这个组件

这样就没问题了

好今天就到这里谢谢大家

最后更新于