纯CSS实现横向滚动条

最新推荐文章于 2024-10-27 14:14:32 发布

Justin0223

最新推荐文章于 2024-10-27 14:14:32 发布

阅读量5.1k

点赞数 1

分类专栏： CSS H5

本文链接：https://blog.youkuaiyun.com/u010377383/article/details/103541593

版权

本文介绍了如何使用纯CSS实现横向滚动条，避免依赖外部库如swiper。通过设置overflow属性，解决滚动条显示和iOS真机上的卡顿问题。通过CSS的calc函数和布局调整，确保滚动条在不影响用户体验的情况下隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

*（一）前言
基于大部分场景，我们需要使用横向滚动，这种时候，大部分会选择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:

最低0.47元/天解锁文章