純css實現移動端橫向滑動列表

時間 2019-12-13

標籤 css 實現移動橫向滑動列表欄目 CSS 简体版

原文原文鏈接

前幾天在公司作開發的時候碰到一個列表橫向滑動的功能，當時用了iscroll作，結果致使手指觸到列表的範圍內豎向滑動屏幕滑動不了的問題。css

這個問題不知道iscroll自己能不能解決，當時選擇了換一種方式來作，只要css就能搞定了，主要是利用了display:-webkit-box來實現。html

<!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-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>web

相關標籤/搜索