用css巧妙實現移動端橫向滑動展示功能
阿新 • • 發佈：2018-11-08
公司需要做一個手機橫向滑動的效果，不想用js外掛，太麻煩，匯入程式碼也多。所以去網上找了一下，用css就能實現，挺方便的。主要利用了display:-webkit-box來實現。
<!DOCTYPE html> <html> <head> <title>橫向滑動</title> <style type="text/css"> .slide-box{ margin-top: 200px; display: -webkit-box; overflow-x: scroll; -webkit-overflow-scrolling:touch; } /*去掉滾動條*/ .slide-box::-webkit-scrollbar{ width:0; height:0; display: none; } .slide-item{ width: 200px; height: 200px; border:1px solid #ccc; margin-right: 30px; } </style> </head> <body> <div class="slide-box"> <div class="slide-item"></div> <div class="slide-item"></div> <div class="slide-item"></div> <div class="slide-item"></div> <div class="slide-item"></div> </div> </body> </html>