2016-11-10 1 views
1

두 번째 탐색 도구로 스크롤 막대에서 왼쪽과 오른쪽에 화살표를 추가하려고했습니다.스크롤 막대에 화살표를 추가하는 방법 (왼쪽에서 오른쪽으로)

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> 
+0

http://stackoverflow.com/help/how-to-ask를 읽으십시오. –

답변

0

세트를 어떤 생각을하는 방법을 스크롤 막대가 이제 친절하고 손가락으로 스크롤 이동하다 .window {ov erflow-x : 표시; } 귀하의 CSS에. 이제 손가락 스트로크로 전체 HTML을 패닝 할 수 있습니다.

StackOverflow는 내 대답이 길거나 그 자리에 놓을 수 없다고 주장합니다.

관련 문제