如何用TypeScript在React中实现BetterScroll的详细使用？

本文共计1363个文字，预计阅读时间需要6分钟。

目录 + 配置与初始化 + 实践 + 在 React + TSX 中使用 Better Scroll + 首先要知道为什么可以实现滚动，原理非常简单，父容器的高度比子元素小即可实现滚动 + 在此之前，我们先来看一下浏览器的滚动原理：

目录

• 配置与初始化
• 实践

react+tsx中使用better-scroll

首先，你要知道为什么可以滚动，原理很简单，父容器的高度比子元素的小即可。

在这之前，我们先来看一下浏览器的滚动原理： 浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。

第二，你需要滚动的元素应该是父元素下的第一个子元素。

这里要注意的是，BetterScroll 默认处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。