可滾動的不帶滾動條的ul元素

我試圖用angular來創建元素列表。該頁面將成爲手機上的應用程序。列表本身可以有很多元素，所以我期望的是，ul元素應該是可滾動的（「swipble」？）。我試圖按照像http://jsfiddle.net/sirrocco/9z48t/和http://jsfiddle.net/qcv5Q/1/一些例子..可滾動的不帶滾動條的ul元素

這是html代碼：

<div class="container"> 
    <div id="spinner-icon" style="display:none"> 
     <span class = "icon-spinner"></span> 
    </div> 
    <div class="col-xs-12 indentation push-down bg-white" ng-repeat="cei in completeElementInfo"> 
     <div class="clearfix"> 
      <div class="pull-left"> 
       <h4>{{cei.description}}</h4> 
       <p>{{cei.name}}</p> 
      </div> 
     </div> 

     <div class="log-widget-list"> 
      <ul class="list scroller clearfix" id="elements-list"> 
       <li class="pull-left" ng-repeat="tinfo in cei.techInfo | orderBy: 'tinfo.sentTime'"> 
        <h4 class="align-center">{{tinfo.elementShortCode}}</h4> 
        <div class="clearfix"> 
         <span class="icon-clock pull-left"></span> 
         <span class="pull-right"> {{tinfo.sentTime}}min</span> 
        </div> 
       </li> 
      </ul> 
     </div> 

    </div> 
</div>

，這是CSS代碼：

.list { 
    margin: 0; 
    padding: 0; 
} 

.log-widget-list { 
    height:100px; 
    width: 720px; 
    overflow: hidden; 
} 

.log-widget-list .scroller{ 
    overflow-x: scroll; 
    list-style-type: none; 
    width: 1500px; /* combined width of all LI's */ 
} 

#elements-list li { 
    width: 100px; 
    list-style: none; 
    box-sizing: border-box; 
    border-top: none!important; 
    background-color: #0accf8; 
    padding: 4px; 
} 

#elements-list li:not(:last-of-type) { 
    border-right: 3px solid #ffffff; 
} 

#elements-list [class^="icon-"], #elements-list [class*=" icon-"] { 
    margin-top: 4px; 
    font-size: 12px; 
}

現在的問題是，我不不希望水平滾動條出現，但它看起來，我不明白爲什麼......任何想法？

來源

2014-06-21 Ivan_nn2

你有沒有找到一個解決這個？ – user2694306

DEMO

http://jsfiddle.net/FTUrF/6/

改變了一些CSS這裏：

.log-widget-list { 
    width: 200px; 
    height: 300px; 
    border: 1px solid #000; 
    overflow: hidden; 
} 
.log-widget-list .scroller { 
    width: 215px; 
    height: 300px; 
    overflow: scroll; 
    padding-bottom: 15px; 
    list-style-type: none; 
}

新增height和.scrollerpadding-bottom和border在.log-widget-list

，並增加了一些更多的這些：

<span class="pull-right"> {{tinfo.sentTime}}min</span>

來源

2014-06-21 15:12:42 imbondbaby

請讓我知道它是否適合你:) – imbondbaby

add overflow:hidden in #wrapper css。

CSS：

#wrapper { 
background: transparent; 
width: 550px; 
color: white; 
height:100%; 
overflow:hidden; 
}

演示：http://jsfiddle.net/lotusgodkk/9z48t/5/

來源

2014-06-21 15:12:43

我把它...滾動條仍然可見。我正在嘗試進行水平滾動。 –

可滾動的不帶滾動條的ul元素

回答

相關問題