隱藏滾動條並用CSS左右滑動

我創建了一個框，我想在左右方向上水平滾動內容，並且想要使用觸摸進行滑動並隱藏滾動條，這裏是工作區JSfiddle 隱藏滾動條並用CSS左右滑動

我應該嘗試使用任何JSplugin來處理這個問題，還是這件事很容易實現？請建議

.spotlight_graphs { 
 
    bottom: 30px; 
 
    clear: both; 
 
    left: 0; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    max-width: 360px; 
 
    overflow: auto; 
 
    position: absolute; 
 
    right: 0; 
 
    width: 100%; 
 
    background-color:#cbcbcb; 
 
    overflow:auto; 
 
    padding:10px; 
 
} 
 
.spotlight_graphs > ul { 
 
    font-size: 0; 
 
    list-style: outside none none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align:left; 
 
    width:200%; 
 
} 
 
.spotlight_graphs > ul > li { 
 
    max-width: 90px; 
 
    width: 33%; 
 
    display:inline-block; 
 
    background-color:#dec8c8; 
 
    height:100px; 
 
    margin:0 5px 5px 0; 
 
    border:1px solid #333333; 
 
} 
 
.spotlight_graphs > ul > li > .graph_detail { 
 
    color: #404040; 
 
    float: left; 
 
    font-size: 14px; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    width: 100%; 
 
}

<div class="spotlight_graphs"> 
 
    <ul> 
 
    <li> 
 
     <div class="graph_detail"> This is dummy title </div> 
 
    </li> 
 
    <li> 
 
     <div class="graph_detail"> This is dummy title </div> 
 
    </li> 
 
    <li> 
 
     <div class="graph_detail"> This is dummy title </div> 
 
    </li> 
 
    <li> 
 
     <div class="graph_detail"> This is dummy title </div> 
 
    </li> 
 
    <li> 
 
     <div class="graph_detail"> This is dummy title </div> 
 
    </li> 
 
    </ul> 
 
</div>

來源

2016-12-07 Sanjeev Kumar

在移動瀏覽器做，滾動條將不會顯示在桌面瀏覽器。當您滑動時會出現一條細小的線條，插入其容器中，並且不會影響佈局的任何內容。如果你願意，你可以使用任何其他的jquery插件，例如http://nicescroll.areaaperta.com/demo.html。 – Ravimallya

我認爲得到這個最簡單的方法是使用CSS只和baiscly旋轉的項目90度。

你可以在這裏找到它解釋得很好： Here's a link！在那裏你可以找到解決方案非常好。

另一種解決方案是將具有滾動條到具有比滾動股利和溢出隱藏爲了掩蓋這樣滾動條以下的高度另一個DIV的DIV：

.hideScroll { 
    height: 129px; 
    overflow: hidden; 
    position: relative; 
}

我編輯你的小提琴這裏：https://jsfiddle.net/xzc7khk0/6

來源

2016-12-07 10:13:28

如果您正在使用webkit瀏覽器（例如chrome和safari），則可以輕鬆將以下代碼添加到CSS中。演示 - >https://jsfiddle.net/xzc7khk0/5/

::-webkit-scrollbar { display: none; }

來源

2016-12-07 10:20:19 balapa

-1

你可以用CSS做@Stan George說的。

但是，這個CSS只適用於手機，因爲你想消失移動的滾動條，所以應用CSS滾動div。

.spotlight_graphs::-webkit-scrollbar{ 
    background-color:transparent; 
}

它將消失滾動條不滾動。

來源

2016-12-07 10:21:48 zed

爲什麼選擇downvoted？如果建議不對，請以您的方式協助並分享您的想法。這對我和其他人都有幫助。 – zed

-1

易與CSS的Webkit

html { 
    overflow: scroll; 
    overflow-x: hidden; 
} 
.spotlight_graphs::-webkit-scrollbar { 
    width: 0px; //remove scrollbar width 
    background: transparent; //optional: it will make scrollbar invisible 
}

來源

2016-12-07 13:49:15 vinkiss

隱藏滾動條並用CSS左右滑動

回答

相關問題