给div加横向滚动栏，然后去修改滚动条的样式,以下只给chrome做了兼容。

直接上代码

css:

html {font-size: 100px;
}
.bottomPrizelist-in {float:left;
    overflow-x:scroll;
    overflow-y:hidden;
    width: 3rem;
    height: 2.6rem;
    background: rgba(0, 255, 0, .3);
    white-space:nowrap;
}
.bottomPrizelist-in>.prizeBox {width: 1.7rem;
    height: 1.7rem;
    margin-top: .5rem;
    margin-left: .3rem;
    display: inline-block;
}
.bottomPrizelist-in>.prizeBox:last-child {margin-right: .3rem;
}
.bottomPrizelist-in>.prizeBox>img {width: 100%;
}
/*滚动条样式*/
.bottomPrizelist-in::-webkit-scrollbar {/*滚动条整体样式*/
    width: .6rem;     /*高宽分别对应横竖滚动条的尺寸*/
    height: .04rem;
}
.bottomPrizelist-in::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: .05rem;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.8);
    background: greenyellow;
}
.bottomPrizelist-in::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: #ccc;
}

html

<div class="bottomPrizelist-in">
    <!--图片随意了-->
    <div class="prizeBox"><img src="imgs/prize/lpa.png"> </div>
    <div class="prizeBox"><img src="imgs/prize/lpb.png"> </div>
    <div class="prizeBox"><img src="imgs/prize/lpc.png"> </div>
    <div class="prizeBox"><img src="imgs/prize/lpd.png"> </div>
    <div class="prizeBox"><img src="imgs/prize/lpe.png"> </div>
</div>

兼容性是个问题，后续会做探讨，市面上有很多相关插件，大家也都可以拿来用。

给div加横向滚动栏，然后去修改滚动条的样式,以下只给chrome做了兼容。相关推荐

div超出不换行_子div超出父div部分横向滚动，不换行
父div: .rootBar{ width: 1920px; height: 216px; float: left; overflow-y: hidden; overflow-x: auto; whi ...
CSS修改滚动条颜色样式(右边滚动条、底部滚动条、div内滚动条)
如下 /* 滚动条宽度 */ ::-webkit-scrollbar{width:1px;} /* 滚动条轨道颜色 */ ::-webkit-scrollbar-track{background-co ...
iframe,window,滚动栏的一些问题
1.Iframe不显示边框:frameborder=0 2.Iframe不显示横向滚动栏:在iframe所指向的页面增加: <style> html{overflow-x:hidden;} ...
H5 实现横向滚动的方法及需要注意的地方
现在的前端开发中,有许多页面上有设计了横向滚动,可以说横向滚动是一个很常见的场景,今天就来说说横向滚动怎么实现以及需要注意的问题. 实现横向滚动要实现横向滚动,方式不止一种,这里我只说最简单的一种, ...
div:给div加滚动栏　div的滚动栏设置
今天做了个样例: div 的滚动栏问题: 两种方法: 一. <div style=" overflow:scroll; width:400px; height:400px;" ...
小程序横向滚动导航栏
先上案例最终效果: 案例实现功能: 1.导航栏横向滚动效果 2.当前元素有下划线标识 3.点击元素,导航栏滚动到相应位置以下将分步骤逐步完善陈述这些功能,最终会呈现所有代码 1.引用组件scroll ...
html scroll无效,css div设置overflow-x: scroll 横向滚动无效
我给最外层div设置了overflow-x: scroll想要里面的span超出时横向滚动发现效果依然是上下滚动请问这个种情况该如何布局 html 满999减40 满999减40 满999减40 ...
html页面加文字横向滚动,js实现文字横向滚动
页面布局恭喜793765***获得 50元巨人点卡奖励恭喜793765***获得 50元巨人点卡奖励恭喜793765***获得 50元巨人点卡奖励恭喜793765***获得 50元巨人点卡奖励 ...
el-table横向滚动时表头与内容串位问题
这里写自定义目录标题新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中.居左.居右 ...

给div加横向滚动栏，然后去修改滚动条的样式,以下只给chrome做了兼容。

给div加横向滚动栏，然后去修改滚动条的样式,以下只给chrome做了兼容。相关推荐

最新文章

热门文章