[分享]css3屏蔽原生滚动

CSS3屏蔽原生滚动是指通过CSS样式来控制页面的滚动效果，以达到更加优美的视觉效果。对于一些需要实现滚动的页面，可以通过以下的CSS样式来实现屏蔽原生滚动：body { overflow: hidd...

CSS3屏蔽原生滚动是指通过CSS样式来控制页面的滚动效果，以达到更加优美的视觉效果。对于一些需要实现滚动的页面，可以通过以下的CSS样式来实现屏蔽原生滚动：

body {
  overflow: hidden;
}

.container {
  height: 100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
} 

其中，overflow: hidden;会隐藏掉页面的原生滚动条，height: 100vh;会设置父元素的高度与视口高度相等，overflow-y: scroll;会在父元素中设置垂直方向的滚动条，-webkit-overflow-scrolling: touch;会开启iOS设备上的缓慢弹性滚动效果。

除了垂直方向的滚动条，还可以通过以下CSS样式实现水平方向的滚动条：

.container {
  width: 100%;
  white-space: nowrap;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
} 

其中，width: 100%;会让父元素的宽度与视口宽度相等，white-space: nowrap;会让内容不换行，overflow-x: scroll;会在父元素中设置水平方向的滚动条。

通过以上的CSS样式，我们就可以实现优美的滚动效果，让页面更加精致。