前端中如何实现滚动条隐藏
使用-webkit-scrollbar
.first{width: 100%;overflow-x: scroll;}.first::-webkit-scrollbar{display: none;}
完整代码:
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>*{padding: 0;margin: 0;}html,body{width: 100%;height: 100%;}.outerbox{width: 90%;overflow: hidden;margin: 160px auto;}.first{width: 100%;overflow-x: scroll;}.first::-webkit-scrollbar{display: none;}.second{width: 100%;position: relative;width: 200%;}.box{width: 13%;float: left;margin: 0 0.25rem;}.box>img{width: 100%;}</style><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /></head><body><div class="outerbox"><div class="first"><div class="second"><div class="box"><img src="/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2608694223,2763187863&fm=26&gp=0.jpg" alt="img"></div><div class="box"><img src="/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2608694223,2763187863&fm=26&gp=0.jpg" alt="img"></div><div class="box"><img src="/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2608694223,2763187863&fm=26&gp=0.jpg" alt="img"></div><div class="box"><img src="/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2608694223,2763187863&fm=26&gp=0.jpg" alt="img"></div><div class="box"><img src="/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2608694223,2763187863&fm=26&gp=0.jpg" alt="img"></div><div class="box"><img src="/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2608694223,2763187863&fm=26&gp=0.jpg" alt="img"></div><div class="box"><img src="/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2608694223,2763187863&fm=26&gp=0.jpg" alt="img"></div></div></div></div></body></html>