纯CSS实现横向滚动条

*（一）前言

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

*（二）实现

大家都知道overflow 可以单独设置

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><metaname="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实现横向滚动条相关推荐

如何将横向滚动条加粗css,css实现横向滚动条的两种方式（代码实例）
本章给大家介绍用css实现横向滚动条的两种方式.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. html代码: 全部 Adobe 微软会计绘画 Adobe 微软会计绘画一. ...
漂亮纯css蓝白色横向导航条代码
漂亮纯css蓝白色横向导航条代码展示图如下: 详细代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
css自定义横向滚动条样式,css滚动条样式自定义
很简单的几行代码 Title * { margin: 0; padding: 0; } .out { width: 600px; height: 600px; margin: 100px auto; ...
[CSS]添加横向滚动条
<table id="datagrid" style="overflow-x:auto;width:auto; height: auto"> 插入o ...
css实现横向滚动条
第一种 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...
HTML下拉菜单怎么做成横向,纯css实现横向下拉导航菜单(可做左侧类目导航)
[实例简介] [实例截图] [核心代码] 无标题文档 *{ margin:0; padding:0;}/*通用选择器样式*/ body{ font-family:"微软雅黑";}/ ...
CSS——水平(横向滚动条)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
html css 水平滚动条,html/css/js-横向滚动条的实现
在前端UI设计时,网页的制作很麻烦,深有感悟!碰到太多的不懂,或是第一次见,就要去网上找资料!横向滚动条就是我遇到麻烦中其中的一个,其实也很简单,只是在几次项目中都用到了这个横向滚动条所以就拿出来说 ...
CSS - 实现横向滚动（横向滚动布局）
前言横向滚动需求很常见,实现起来也很容易. 如下图所示,PC 端是用鼠标拖动滚动条,H5 移动端是手指滑动: 解决方案上述效果图的完整代码如下,一键复制运行起来即可. 核心三要素: 父元素设置 w ...

纯CSS实现横向滚动条

纯CSS实现横向滚动条

*（一）前言

*（二）实现

纯CSS实现横向滚动条相关推荐

最新文章

热门文章