如何在滾動條中添加箭頭（左 - 右）

我嘗試在滾動條的左側和右側添加箭頭作爲第二個導航工具。如何在滾動條中添加箭頭（左 - 右）

滾動條現在是移動友好，用手指滾動

有任何想法如何把它

CSS

 

<style> 

a 
{ 
    color: #252525; 
    text-decoration-line: none; 
    text-decoration-style: solid; 
    transition-duration: 100ms; 
    transition-timing-function: linear; 
    transition-delay: 20ms; 
    transition-property: color, background-color; 
} 

.window { 
    margin-top: 12px; 
    overflow-y: hidden; 
    overflow-x: hidden; 
    -webkit-overflow-scrolling: touch; 
    position: relative; 
    margin-bottom: 20px; 
    background-color: #f5f5f5; 
    border: 1px solid #e3e3e3; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 
    /* fixes scrolling in IE */ 
    padding-left: 0; 
    padding-right: 0; 
     margin-top: 50px; 
    margin-right: 0px; 
    margin-bottom: 10px; 
    margin-left: 0px; 
} 


.ie8 .window 
    padding-top: 0; 
    padding-bottom: 0; 
} 


.slider-frame-wrapper{ 
    overflow: hidden; 
    overflow-x: scroll; 
} 

.slider-frame { 
    overflow: visible; 
    margin-bottom: 0; 
    white-space: nowrap; 
} 

.ie8 .slider-frame { 

    background-color: #ececec; 
    background-image: none; 
    background-repeat: repeat; 
    background-attachment: scroll; 
    background-clip: border-box; 
    background-origin: padding-box; 
    background-position-x: 0%; 
    background-position-y: 0%; 
    background-size: auto auto; 
    font-weight: bold; 
    font-size: 16px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    margin-bottom: 0px; 
} 

.slider-panel { 
    max-width: 270px; /* width of each individual items */ 
    display: inline-block; 
    vertical-align: top; 
    margin-right: 7px; 
    white-space: normal; 
    border-right-width: 3px; 
    border-right-style: solid; 
    border-right-color: black; 
    padding-left: 10px; 
    padding-right: 20px; 
    float: none; 

} 

</style>

HTML

<body> 

       <div class="well window"> 
       <div class="slider-frame-wrapper">  
       <ul class="slider-frame"> 

<li class="slider-panel"><h2><a title="iPhone" href="#/apple- c-19.html">iPhone</a></h2></li> 

<li class="slider-panel"><h2> 
<a title="Samsung" href="#/samsung-c-21.html">Samsung</a></h2> 
</li> 
<li class="slider-panel"><h2> 
<a title="LG" href="#/lg-c-23.html">LG</a></h2> 
</li> 
<li class="slider-panel"><h2> 
<a title="Huawei" href="#/huawei-c-31.html">Huawei</a></h2> 
</li> 
<li class="slider-panel"><h2> 
<a title="Sony" href="#/sony-c-24.html">Sony</a></h2> 
</li> 
</ul>  
    </div> 

    </body>

來源

2016-11-10 Filaderlis Manolis

請閱讀http://stackoverflow.com/help/how-to-ask。 –

集.window {ov erflow-x：可見; }在你的CSS。現在你可以用手指平移你的整個HTML。

出於某種原因，StackOverflow堅稱我的答案會更長，否則它不會讓我放置它。

來源

2016-11-10 15:07:47

如何在滾動條中添加箭頭（左 - 右）

回答

相關問題