1. 홈
  2. 질의 응답
  3. CSS 스크롤바 너비와 둥근 효과

CSS 스크롤바 너비와 둥근 효과

2013-09-23 2 views
0

다이빙에서 스크롤 막대의 기본 너비 너비를 설정할 수있는 방법은 무엇입니까? 내가 가진 것은 자동 스크롤 막대가있는 div입니다. 스크롤 막대의 너비를 얇은 선으로 설정하고이 위쪽 및 아래쪽 화살표를 숨기려면 어떻게해야합니까?CSS 스크롤바 너비와 둥근 효과

출처

2013-09-23 rushd

+0

일부 코드를 추가하십시오 - HTML과 CSS가 속임수를 쓰겠습니다! –

답변

0

스크롤 막대는 브라우저/툴킷에 따라 다르며 CSS에서 직접 제어 할 수 없습니다. JavaScript를 사용하여 스크롤바를 구현할 수도 있지만, 많은 작업이 필요합니다.

출처

2013-09-23 14:34:17 bmurauer

5

당신은 CSS의 웹킷 기능을 사용할 수 있습니다 : 당신은 그것을 here에 대해 읽을 수 있습니다

. 예를 들어

:

::-webkit-scrollbar { 
width: 12px; 
} 

::-webkit-scrollbar-track { 
-webkit-box-shadow: inset 0 0 6px  rgba(0,0,0,0.3); 
border-radius: 10px; 
} 

::-webkit-scrollbar-thumb { 
border-radius: 10px; 
-webkit-box-shadow: inset 0 0 6px  rgba(0,0,0,0.5); 
}

(DEMO)

행운 아이폰 OS와 같은 스크롤을 만들겠습니까

출처

2013-09-23 14:36:32

+0

조언을 주셔서 감사하지만 내가 작동하도록 다른 뭔가를 inclulde해야합니까. 나는 내 CSS 파일에 대한 CSS 부분을 inculded 있지만 아무것도 scroolbar에 chnaged입니다. 벨소리로 내 CSS의 일부 : - 웹킷 - 스크롤바 { 너비 : 12px; } :: - webkit-scrollbar-track { -webkit-box-shadow : 인세 트 0 0 6px rgba (0,0,0,0.3); border-radius : 10px; } – rushd

+0

@rushd : 글쎄, 응답하려면 다른 요소가 필요합니다. 테스트를 거쳐 작동하는 [this jsFiddle] (http://jsfiddle.net/Prxsj/)을 확인하십시오. 변경된 스크롤 바를 볼 수없는 경우; 사용중인 브라우저가 너무 오래되어 표시 할 수 없습니다. ** ** 그것을 볼 수있는 경우 : 구현을 살펴보십시오. 구현 방법도 마찬가지입니다. 행운을 빕니다! –

관련 문제

 관련 문제