用CSS实现横向滚动条

时间:2021-12-20 23:54:04

在进行app制作时,需要使用横向滚动条是内容展示更完善

首先,这是html代码:

用CSS实现横向滚动条

这是CSS代码:

用CSS实现横向滚动条

要点:

  1. 设置显示内容的宽
  2. white-space是防止内容自动折行
  3. overflow-y设置为hidden,否则会出现上下滚动条
  4. ::-webkit-scrollbar可以设置滚动条样式,display:none,去掉滚动条

效果:

用CSS实现横向滚动条