如何详细解析React Tsx中Better Scroll的应用？

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

目录 + 配置与初始化 + 实践 + 在 React + TypeScript 中使用 better-scroll + 首先要知道为什么可以滚动，原理很简单，父容器的高度比子元素的高度大即可。子元素滚动时，父容器跟随滚动，实现滚动效果。+ 在此之前，我们先来看一下浏览器的滚动原理：+ 浏览器滚动

目录

• 配置与初始化
• 实践

react+tsx中使用better-scroll

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

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

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

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