昆明做网站哪家好营销型企业网站有哪些
文章目录
- 前言
- 一、使用步骤
- 1、在想要滚动的元素上设置相应的css类名
- 2.设置样式
- 总结
前言
此文章用于，让我自己快速设置 浏览器、h5 默认滚动条样式……
一、使用步骤
1、在想要滚动的元素上设置相应的css类名
代码如下：
<div class="list scroll-container"><p>…………</p><p>…………</p>…………
</div>
2.设置样式
代码如下：
/* 容器样式 */
.list{height: 500px; /* 记住一定要设置高度哦！*/
}/* 滚动条样式 */
.scroll-container { overflow: hidden; overflow-y: auto;
}
.scroll-container::-webkit-scrollbar-track-piece { background-color: rgba(0, 0, 0, 0); border-left: 1px solid rgba(0, 0, 0, 0);
}
.scroll-container::-webkit-scrollbar { width: 5px; height: 13px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}
.scroll-container::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); background-clip: padding-box; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; min-height: 28px;
}
.scroll-container::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.2); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
} 该处使用的url网络请求的数据。
总结
以上就是今天的内容，三Q！