介绍css overflow smooth scroll mobile

在开发移动端网站或App时，我们需要对页面进行滚动，让用户能够查看更多的内容。但是默认的滚动有时太生硬，不够流畅，这时我们可以使用CSS的overflow属性来实现平滑滚动效果。

CSS overflow属性

CSS的overflow属性定义当一个元素的内容溢出其框时发生的事情。它可以有以下取值：

• visible：默认值，内容不会被修剪，会呈现在元素外部。
• hidden：内容将被修剪，并且其余内容不可见。
• scroll：内容会被修剪，但是浏览器会显示滚动条以便滚动查看其余的内容。
• auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余内容。

平滑滚动效果实现

当我们需要使用overflow属性时，可以加上一些CSS属性来实现平滑滚动效果，推荐如下：

/* 取消浏览器默认的滚动条 */
body {
  overflow: hidden;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #000000;
}

/* 平滑滚动效果 */
html {
  scroll-behavior: smooth;
}

其中，scroll-behavior属性定义了滚动行为，设置为smooth时就可以实现平滑滚动效果。

移动端滚动

在移动端，我们可以使用touch事件来实现滑动操作，但是如果使用overflow属性，会出现滑动不顺畅的问题。此时，可以加上以下CSS属性来解决：

/* 允许元素滚动 */
-webkit-overflow-scrolling: touch;

/* 禁止元素选择 */
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;

这样就可以让移动端滚动更加平滑。

总结

使用CSS overflow属性可以实现平滑滚动效果，使用scroll-behavior属性可以控制滚动行为。在移动端，还需要加上一些额外的CSS属性来保证滚动顺畅。