滚动内容有图片，为什么我的 BetterScroll 就滑动不了？一枚努力学习前端的程序媛，之前都在自己的博客： Stu

一枚努力学习前端的程序媛，之前都在自己的博客： Study Of Toast (breadfruit.github.io)(国内站点上打卡，现在是到了第17期了，每周阅读刷刷

官网FAQ

如何配置一个Better-Scoll：

可以从图中看出：我们如果使内容在固定的盒子中滚动，首先是content比wrapper小。那么如何去利用css实现这个高度差

对于需要全屏内容滚动的

.wrapper {
    height: 100vh
}
.content {
    min-height: 101vh
}

对于ui图给定了高度

.wrapper {
    height: 120px;
}
.content {
    height: 200px;
}

存在不确定尺寸的图片

原因

bs 执行计算可滚动高度的时候，图片还未渲染完成，也无法监听到图片的加载。有时候甚至配置 observeDOM 为 true 也没效果。
解决

其中可以利用react中的ref获取dom节点元素。

    
 const ref: React.MutableRefObject<any> = useRef(null);

在图片的 onload/pullUp/pullDown 的回调函数里面调用 bs.refresh() 来确保得到正确的图片高度之后再计算可滚动的高度。

      onPullingDown={() => {
            ref.current.refresh();
            console.log("onPullingDown");
          }}
      onPullingUp={() => {
           ref.current.refresh();
           console.log("onPullingUp");
      }} // 触发上拉加载回调函数

Before：

After：