欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

纯CSS实现横向滚动条

程序员文章站 2024-01-22 21:28:04
...

*（一）前言
基于大部分场景，我们需要使用横向滚动，这种时候，大部分会选择swiper来实现，但是其实，我们也可以通过纯CSS的方式实现一个滚动条

*（二）实现
大家都知道overflow 可以单独设置

// 横向滚动
overflow-x: scroll;
// 纵向滚动
overflow-y: scroll;

基于上面知识，我们首先来实现一个滚动,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
  />
  <title>滚动条</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    html, body {
      height: 100%;
    }
    body {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .container {
      width: 100%;
      height: 200px;
      border: 1px solid red;
      overflow: hidden;
    }
    ul {
      overflow-x: scroll;
      overflow-y: hidden;
      height: 100%;
      list-style-type: none;
      display: flex;
      align-items: center;
    }
    li {
      width: 200px;
      height: 100%;
      flex: none;
      border: 1px solid blue;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    li:nth-child(n + 2) {
      margin-left: 20px;
    }
  </style>
</head>
<body>

<div class="container">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>
</div>
</body>
</html>

纯CSS实现横向滚动条
从上面结果我们可以发现，
1.滚动条依然存在
2.在ios真机上滑动会出现卡顿，但是android却正常

我们来解决上面两个问题
纯CSS实现横向滚动条
commit更改，就是解决上面两个问题，但是目前会出现其他情况，你会发现，滚动条虽然在谷歌控制台不在出现，但是在ios真机，依然会出现。

这时候我们需要调整下布局，
我们知道外层容器.container 是隐藏显示内容的，这时候我们可以css的calc函数将ul的宽度，撑高20px，然后再通过padding-bottom: 20px 将原来的高度较准，这样虽然滚动条 依然存在，但是已经在.container外面，用户不可见，

那么实现代码如下
纯CSS实现横向滚动条
那么到现在，我们demo已经实现完成。

相关标签： H5 CSS

上一篇： 与Linux 内核相关的几个目录

下一篇： java中关于时间日期操作的常用函数

推荐阅读