div横向超出可滚动，自动添加滚动条，自定义滚动条样式，

先看一下最终的效果图吧：

第一种文字内容超出显示滚动条：
父盒子：横向超出滚动：overflow-x: scroll;

.box {width: 100%;box-sizing: border-box;overflow-x: scroll;
}

子盒子：内容不换行 white-space:nowrap;

.item {white-space:nowrap;
}

实现效果，超出滚动：如下图：

这个会发现即使内容没超出还是有滚动条占位如下图：

这里吧**overflow-x: scroll;换成overflow-x: auto;**即可解决，如下图，让他自适应添加滚动条

第二种：自定义滚动条样式：如下图

.box::-webkit-scrollbar{height:9px;background-color: #969696;
}
.box::-webkit-scrollbar-track{background: #e2e2e2;border-radius:2px;
}
.box::-webkit-scrollbar-thumb{background: #969696;border-radius:8px;
}
.box::-webkit-scrollbar-thumb:hover{background: #a5a5a5;
}
.box::-webkit-scrollbar-corner{background: #969696;
}

这样一款完美的横向超出自动添加滚动条功能就完成了，你学废了吗，点个赞吧：

div横向超出可滚动，自动添加滚动条，自定义滚动条样式，相关推荐

CSS 滚动条: 自定义滚动条样式
CSS 滚动条: 自定义滚动条样式文章目录 CSS 滚动条: 自定义滚动条样式前言正文 overflow & ::-webkit-scrollbar 实际效果(自定义滚动条.隐藏滚动条) ...
安卓 textview 超出限制自动添加省略号
1.单行 <TextView android:id="@id/suma_media_detail_tv_actor" ...
vuejs滚动条_Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
前言前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件. vscroll 一款基于vue2.x开发的网页端轻量级超小巧自定义美化滚动条组件.支持是否 ...
DIV怎么自动添加滚动条？并给滚动条添加样式
一.如何实现当DIV里的内容超过DIV的高度,DIV会自动添加滚动条? 1. div的style设置了overflow:auto后,当DIV里的内容超过DIV的高度,DIV会自动添加滚动条,拉动滚动条 ...
php表格自动添加滚动条,jsp中为表格添加水平滚动条的方法
首先,本项目中使用的是bootstrap框架,因此有些人会说,给表格设置自适应属性就可以了这里要申明的是 bootsrtap自适应是针对当浏览器不占满整个屏幕,而是一半的时候才会出现横向的滚动条而 ...
div滚动条样式css3,CSS3自定义滚动条样式的示例详解
在前面一篇文章中,我们给大家介绍了CSS设置div滚动条样式,我们都知道当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义. ...
【CSS】DIV 自定义滚动条样式
当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义来自:DIV 自定义滚动条样式滚动条的css样式主要有三部分组成 ::- ...
CSS横向滚动条自定义样式
接上一篇,有的时候在项目里面会使用到滚动条但是浏览器默认的滚动条的样式不怎么好看这个时候需要进行一些处理一般用到两种 1:隐藏滚动条,但是可以支持滚动的方法 ::-webkit-scrollba ...
jsp ul设置滚动条_jquery实现Li滚动时滚动条自动添加样式的方法
本文实例讲述了jquery实现Li滚动时滚动条自动添加样式的方法.分享给大家供大家参考.具体如下: 这里使用jquery实现当拖动滚动条的时候,Li滚动列表中的内容会自动随滚动条变化而下移,并自动添加 ...

div横向超出可滚动，自动添加滚动条，自定义滚动条样式，

div横向超出可滚动，自动添加滚动条，自定义滚动条样式，相关推荐

最新文章

热门文章