纯CSS实现横向滚动条

最新推荐文章于 2024-05-24 17:17:32 发布

Justin0223

最新推荐文章于 2024-05-24 17:17:32 发布

阅读量4.8k

点赞数 1

分类专栏： CSS H5

本文链接：https://blog.csdn.net/u010377383/article/details/103541593

版权

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

Justin0223

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
纯CSS实现横向滚动条

*（一）前言基于大部分场景，我们需要使用横向滚动，这种时候，大部分会选择swiper来实现，但是其实，我们也可以通过纯CSS的方式实现一个滚动条*（二）实现大家都知道overflow 可以单独设置// 横向滚动overflow-x: scroll;// 纵向滚动overflow-y: scroll;基于上面知识，我们首先来实现一个滚动,<!DOCTYPE html>...
复制链接

扫一扫