327

div전체 페이지가 아닌 CSS (Cascading Style Sheets)를 통해 스크롤 막대를 사용자 정의하려면 어떻게 해야합니까?

css html scrollbar

— 하리스 데프
소스

overflow:auto;그것에 적용하십시오 <div>. 더 자세한 배경 정보가 있습니까?

— Rob W

그했다,하지만 난 정의 스크롤바가 필요합니다, 음 .. 스크롤의 디자인

— harisdev

맞춤 색상? IE에서만 지원되며 다른 최신 브라우저에서는 지원되지 않습니다. 순수한 CSS를 사용하면 달성 할 수 없습니다.

— Rob W

1

가장 간단한 JS 솔루션 (CSS에는 브라우저 간 지원 이 없음 ) -yaireo.github.io/fakescroll

— vsync

내 답변보기 here : stackoverflow.com/questions/7357203/custom-scrollbars/…

— Buzinas

688

스크롤 막대, CSS 및 브라우저 호환성에 대한 최신 정보를 통합하는 것이 도움이 될 것이라고 생각했습니다.

스크롤 바 CSS 지원

현재 크로스 브라우저 스크롤 막대 CSS 스타일 정의가 없습니다. 마지막에 언급 한 W3C 기사 에는 다음 내용이 있으며 최근에 업데이트되었습니다 (2014 년 10 월 10 일).

일부 브라우저 (IE, Konqueror)는 비표준 속성 인 'scrollbar-shadow-color', 'scrollbar-track-color'등을 지원합니다. 이러한 속성은 불법입니다. CSS 사양에 정의되어 있지 않거나 독점으로 표시되지 않습니다 (접두사 "-공급 업체-").

마이크로 소프트

다른 사람들이 언급했듯이 Microsoft는 스크롤 막대 스타일을 지원하지만 IE8 이상에서만 지원합니다.

예:

<!-- language: lang-css -->

    .TA {
        scrollbar-3dlight-color:gold;
        scrollbar-arrow-color:blue;
        scrollbar-base-color:;
        scrollbar-darkshadow-color:blue;
        scrollbar-face-color:;
        scrollbar-highlight-color:;
        scrollbar-shadow-color:
    }

크롬 & 사파리 (WebKit)

마찬가지로 WebKit에는 이제 자체 버전이 있습니다.

스타일링 스크롤바 : https://www.webkit.org/blog/363/styling-scrollbars/
모든 WebKit 스크롤 막대 스타일링 데모

에서 웹킷에서 사용자 정의 스크롤바 , 관련 CSS :

/* pseudo elements */
::-webkit-scrollbar              {  }
::-webkit-scrollbar-button       {  }
::-webkit-scrollbar-track        {  }
::-webkit-scrollbar-track-piece  {  }
::-webkit-scrollbar-thumb        {  }
::-webkit-scrollbar-corner       {  }
::-webkit-resizer                {  }

/* pseudo class selectors */
:horizontal
:vertical
:decrement
:increment
:start
:end 
:double-button
:single-button
:no-button
:corner-present
:window-inactive

파이어 폭스 (Gecko)

버전 64부터 Firefox는 속성 scrollbar-color(부분적으로 W3C draft ) 및 scrollbar-width( W3C draft )를 통한 스크롤 막대 스타일을 지원합니다 . 구현에 대한 좋은 정보는 이 답변 에서 찾을 수 있습니다. .

크로스 브라우저 스크롤 막대 스타일링

JavaScript 라이브러리 및 플러그인은 크로스 브라우저 솔루션을 제공 할 수 있습니다. 많은 옵션이 있습니다.

예제가 포함 된 20 개의 jQuery Scrollbar 플러그인 (2012 년 7 월 24 일)
슬라이더, 스크롤러 및 스크롤바를위한 30 개 이상의 JavaScript / Ajax 기술 (2008 년 5 월 7 일)
유용한 스크롤바 CSS / JavaScript 스타일링 튜토리얼 (2012 년 8 월)
15 개 이상의 무료 및 프리미엄 jQuery 스크롤 플러그인 (2012 년 8 월 26 일)

목록은 계속 될 수 있습니다. 최선의 방법은 사용 가능한 솔루션을 검색하고 연구하고 테스트하는 것입니다. 나는 당신이 당신의 필요에 맞는 것을 찾을 수있을 것이라고 확신합니다.

불법 스크롤 막대 스타일링 방지

"공급 업체"라는 접두사가 올바르게 지정되지 않은 스크롤 막대 스타일을 방지하려는 경우 W3C의이 기사에서는 몇 가지 기본 지침을 제공합니다 . 기본적으로 브라우저와 관련된 사용자 스타일 시트에 다음 CSS를 추가해야합니다. 이러한 정의는 방문하는 모든 페이지에서 유효하지 않은 스크롤 막대 스타일을 재정의합니다.

body, html {
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-3dlight-color: ThreeDLightShadow !important;
  scrollbar-darkshadow-color: ThreeDDarkShadow !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}

중복되거나 유사한 질문 / 소스가 연결되지 않았습니다

참고 : 이 답변에는 다양한 출처의 정보가 포함되어 있습니다. 소스가 사용 된 경우이 답변에도 링크됩니다.

— JSuar
소스

228

웹은 20 년 넘게 사용되어 왔지만 여전히 스크롤바 스타일을 지정하는 표준 방법은 없습니다. 20 년 동안의 표준위원회는 사람들이 물건을 스크롤한다는 사실을 알지 못했습니다. 느리고 비꼬는 박수 박동 속도가 나에게 어떻게 느끼는지 적절하게 표현할 수는 없습니다. 그러나 첫 번째 박수와 두 번째 박수 사이의 20 년의 지연은 적합하다고 생각합니다. 어떤 관점에서는 WWW가 나왔을 때 아직 태어나지 않았으며 지금은 컴퓨터 엔지니어입니다. 갈 길, W3C.

— Parthian Shot

3

내 두 센트를 추가하기 위해 Gmail과 YouTube는 Chrome에서 스크롤 막대를 양식화했으며 탐색기와 Firefox에서 기본 스크롤 막대를 양식화했습니다. 그 표준이 그들에게 충분하다면 나에게도 충분합니다

— yonatanmn

9

@ PaulD.Waite 글쎄요, 그러나 그것은 모든 것에 적용될 수 있습니다. 또한 CSS는 언어로 정확하게 존재하므로 디자이너가 기본값을 재정의하도록 선택할 수 있습니다. 전체 UI 아이디어는 나쁜 UI 디자이너가 직관적이지 않은 요소를 만들 수 있지만 사이트 디자이너가 무능하다고 가정하자마자 페이지 사용자 정의를 허용하는 요점은 무엇입니까?

— Parthian Shot

6

@ PaulD.Waite 분명히, 이것은 그중 하나가 아닙니다. 어쨌든 사이트 디자이너가 화면을 완전히 제어해야하는 영역에 있기 때문에 보안 위험이 없으며 부분적으로는 실제로 문제가되지 않기 때문입니다. 많은 사이트가 자체 해킹을 구현하여 스크롤 막대처럼 보이고 작동하는 것을 만들고 잘 작동합니다. 그들은 잘 작동하고 더 좋아 보일뿐만 아니라 사람들은 실제로 사용법을 이해합니다. 불행히도, 그들은 해킹이기 때문에 때로는 인쇄 기능과 같은 것들과 잘 어울리지 않을 수도 있습니다.

— Parthian Shot

5

이 답변은 전체 페이지가 아닌 특정 div에 스크롤 막대 스타일을 적용하는 방법 인 그의 질문을 완전히 해결하지 못했습니다 .

— Stewart

14

이것을 시도하십시오

출처 : https://nicescroll.areaaperta.com/

간단한 구현

<script type="text/javascript">
 $(document).ready(

  function() { 

    $("html").niceScroll();

  }

);
</script>

jQuery 플러그인 스크롤 막대이므로 스크롤 막대를 제어 할 수 있으며 다양한 OS에서 동일하게 보입니다.

— 딜 루시아 고나 갈라
소스

아마도 사용자 정의 할 수 있다고 확신하지만 페이지의 데모는 너무 느리게 스크롤되고 스크롤 막대를 잡기가 너무 어렵습니다.

— Goose

4

사실상 모든 jQuery 플러그인 ( [shudders]) 과 마찬가지로 이것은 스레드가 기본 GPU 가속 스크롤 구현에 비해 상당히 느립니다. 완전히 심각한 응용 프로그램에 적합하고, 좋은 UX에 방해. 장난감 웹 사이트를위한 것이 아니라면 이것을 피하는 것이 좋습니다.

— John Weisz

2

사람들이 순수한 자바 스크립트를 BAM이라고 부를 때 나는 그것을 싫어합니다! jquery 플러그인.

— Dinh Tran

nicescroll은 브라우저 기능을 비활성화하므로 사용하지 않는 것이 좋습니다. 중간 클릭으로 스크롤하면 nicescroll에서 작동하지 않습니다.

— Aloso

이 niceScroll 사랑, 그것은 HTML 구조 아프게하지 않는 것을 의미 DIV 주변 요소 랩퍼 추가하지 않습니다

— datdinhquoc을

11

CSS에서는 사용자 정의 스크롤 막대를 사용할 수 없으므로 JavaScript 마법이 필요합니다.

일부 브라우저 ::-webkit-scrollbar는 Webkit 과 같은 비 사양 CSS 규칙을 지원 하지만 Webkit에서만 작동하므로 이상적이지 않습니다. IE도 이와 같은 것이 있었지만 더 이상 지원하지 않는다고 생각합니다.

— 엘크 란
소스

2

구식 답변

— T.Todua

1

@ T.Todua이 답변에 대해 더 이상 사용되지 않는 것은 무엇입니까?

— kojow7

6

많은 사람들처럼, 나는 다음과 같은 것을 찾고있었습니다.

대부분의 최신 브라우저에서 일관된 스타일과 기능
우스운 3000 줄 부풀어 오른 jQuery 확장이 아닙니다 *

...하지만 아아-아무것도!

직업이 가치가 있다면 ... 약 30 분 안에 무언가를 얻을 수있었습니다. 면책 조항 : 알려진 몇 가지 (아마도 아직 알려지지 않은) 문제가 있지만 지구상의 다른 2920 줄의 JS가 무엇을 제공하는지 궁금합니다.

var dragParams;
	window.addEventListener('load', init_myscroll);

	/* TODO: Much to do for v axis! */

	function bardrag_mousemove(e) {
	  var pos = (e.clientX - dragParams.clientX) + dragParams.offsetLeft;
	  pos = Math.min(Math.max(0, pos), dragParams.maxLeft);
	  dragParams.slider.style.left = pos + 'px';
	  updateScrollPosition(dragParams.slider, pos);
	}

	function updateScrollPosition(slider, offsetVal) {
	  var bar = slider.parentNode;
	  var myscroll = bar.parentNode;
	  var maxView = myscroll.scrollWidth - myscroll.offsetWidth;
	  var maxSlide = bar.offsetWidth - slider.offsetWidth;
	  var viewX = maxView * offsetVal / maxSlide;
	  myscroll.scrollLeft = viewX;
	  bar.style.left = viewX + 'px';
	}

	function drag_start(e) {
	  var slider = e.target;
	  var maxLeft = slider.parentNode.offsetWidth - slider.offsetWidth;
	  dragParams = {
	    clientX: e.clientX,
	    offsetLeft: slider.offsetLeft,
	    slider: e.target,
	    maxLeft: maxLeft
	  };
	  e.preventDefault();
	  document.addEventListener('mousemove', bardrag_mousemove);
	}

	function drag_end(e) {
	  e.stopPropagation();
	  document.removeEventListener('mousemove', bardrag_mousemove);
	}

	function bar_clicked(e) {
	  var bar = e.target;
	  var slider = bar.getElementsByClassName('slider')[0];
	  if (bar.className == 'h bar') {
	    var maxSlide = bar.offsetWidth - slider.offsetWidth;
	    var sliderX = e.offsetX - (slider.offsetWidth / 2);
	    sliderX = Math.max(0, Math.min(sliderX, maxSlide));
	    slider.style.left = sliderX + 'px';
	    updateScrollPosition(slider, sliderX);
	  }
	}

	function init_myscroll() {
	  var myscrolls = document.getElementsByClassName('container');
	  for (var i = 0; i < myscrolls.length; i++) {
	    var myscroll = myscrolls[i];
	    var style = window.getComputedStyle(myscroll);
	    if (style.overflowY == 'scroll' || (style.overflowY == 'auto' && myscroll.offsetHeight < myscroll.scrollHeight)) {
	      addScroller(false, myscroll);
	    }
	    if (style.overflowX == 'scroll' || (style.overflowX == 'auto' && myscroll.offsetWidth < myscroll.scrollWidth)) {
	      addScroller(true, myscroll);
	    }
	  }
	}

	function addScroller(isX, myscroll) {
	  myscroll.className += ' myscroll';
	  var bar = document.createElement('div');
	  var slider = document.createElement('div');
	  var offsetDim = isX ? myscroll.offsetWidth : myscroll.offsetHeight;
	  var scrollDim = isX ? myscroll.scrollWidth : myscroll.scrollHeight;
	  var sliderPx = Math.max(30, (offsetDim * offsetDim / scrollDim));
	  slider.style.width = 100 * sliderPx / offsetDim + '%';
	  slider.className = 'slider';
	  bar.className = isX ? 'h bar' : 'v bar';
	  bar.appendChild(slider);
	  myscroll.appendChild(bar);

	  bar.addEventListener('click', bar_clicked);
	  slider.addEventListener('mousedown', drag_start);
	  slider.addEventListener('mouseup', drag_end);
	  bar.addEventListener('mouseup', drag_end);
	  document.addEventListener('mouseup', drag_end);
	}

body {
  background-color: #66f;
}
.container {
  background-color: #fff;
  width: 50%;
  margin: auto;
  overflow: auto;
}
.container > div:first-of-type {
  width: 300%;
  height: 100px;
  background: linear-gradient(to right, red, yellow);
}
/* TODO: Much to do for v axis! */

.myscroll {
  overflow: hidden;
  position: relative;
}
.myscroll .bar {
  background-color: lightgrey;
  position: absolute;
}
.myscroll {
  padding-bottom: 20px;
}
.myscroll .h {
  height: 20px;
  width: 100%;
  bottom: 0;
  left: 0;
}
.myscroll .slider {
  background-color: grey;
  position: absolute;
}
.myscroll .h .slider {
  height: 100%;
}

<div class="container">
  <div></div>
</div>

스 니펫 확장

— ne1410s
소스

1

배경 : 선형 그라데이션 (오른쪽, 빨간색, 노란색);

— xgqfrms

5

나는 많은 플러그인을 시도했지만 대부분의 브라우저를 지원하지는 않습니다. iScroll 및 nanoScroller 가 모든 브라우저에서 작동합니다.

IE11-> IE6
IE10-WP8
IE9-WP7
IE Xbox One
IE Xbox 360
구글 크롬
파이어 폭스
오페라
원정 여행

그러나 iScroll은 터치와 함께 작동하지 않습니다!

데모 iScroll : http://lab.cubiq.org/iscroll/examples/simple/
데모 nanoScroller : http://jamesflorentino.github.io/nanoScrollerJS/

— 오우디
소스

나노 스크롤러는 가로 스크롤을 지원하지 않습니다.

— FlavorScape

REPO는 보관 github.com/cubiq/iscroll 내가 다른 대안을 찾고 제안

— Ouadie

5

이 링크를 확인하십시오. 실무 데모의 예

   #style-1::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

CSS 스크롤 바

2

데모 주셔서 감사합니다. 먼저 Firefox 58.0.2 (64 비트, Windows 7 Pro / 64)로 실행했으며 모든 스크롤 막대가 동일했습니다. 그런 다음 Chrome 버전 65.0.3325.162 (공식 빌드) (64 비트)로 실행했는데 모두 다릅니다. 따라서 (의도하지 않게) -webkit-접근 방식 의 한계를 보여주었습니다 .

— CODE-REaD

4

Firefox 새 버전 (64)은 CSS 스크롤바 모듈 레벨 1을 지원합니다

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}

<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</div>

스 니펫 확장

출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

Firefox 스크롤바

https://codepen.io/fatihhayri/pen/pqdrbd

— 파티 하이 리오 룰루
소스

3

다음은 Chrome 및 Safari에서 작동하는 웹킷 예입니다.

CSS :

::-webkit-scrollbar 
{
    width: 40px;
    background-color:#4F4F4F;
}

::-webkit-scrollbar-button:vertical:increment 
{
    height:40px;
    background-image: url(/Images/Scrollbar/decrement.png);
    background-size:39px 30px;
    background-repeat:no-repeat;
}

::-webkit-scrollbar-button:vertical:decrement 
{
    height:40px;
    background-image: url(/Images/Scrollbar/increment.png);    
    background-size:39px 30px;
    background-repeat:no-repeat;
}

산출:

여기에 이미지 설명을 입력하십시오

— 웨지를 거부
소스

3

.className::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(0,0,0,0);
}

.className::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}

나 같은 멋진 모바일 / OSX를 주었다.

— csomakk
소스

1

보다 간결한 응답. IMHO 실제로 하나의 div 스타일을 지정하는 방법에 대한 OP의 질문에 대답했습니다. 좋은.

— Danimal Reks가

2

HTML 문서의 사용자 정의 div 요소에 사용자 정의 스크롤 막대를 적용 할 수있는 방법이 있습니다. 다음은 도움이되는 예입니다. https://codepen.io/adeelibr/pen/dKqZNb 그러나 요점으로. 이런 식으로 할 수 있습니다.

<div class="scrollbar" id="style-1">
  <div class="force-overflow"></div>
</div>

CSS 파일은 다음과 같습니다.

.scrollbar
{
  margin-left: 30px;
  float: left;
  height: 300px;
  width: 65px;
  background: #F5F5F5;
  overflow-y: scroll;
  margin-bottom: 25px;
}

.force-overflow
{
  min-height: 450px;
}

#style-1::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
  width: 12px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #555;
}

— 아델 임란
소스

2

이것이 Google이 오랫동안 일부 응용 프로그램에서 사용한 것입니다. 코드에서 다음 클래스를 적용하면 Chrome에서 스크롤 막대를 숨기지 만 여전히 작동한다는 것을 참조하십시오.

클래스는 jfk-scrollbar, jfk-scrollbar-borderless및jfk-scrollbar-dark

.testg{ border:1px solid black;  max-height:150px;  overflow-y: scroll; overflow-x: hidden; width: 250px;}
.content{ height: 700px}

/* The google css code for scrollbars */
::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px
}
::-webkit-scrollbar-button {
    height: 0;
    width: 0
}
::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px
}
::-webkit-scrollbar-track:horizontal {
    border-width: 7px 0 0
}
::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:active {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:active {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:horizontal {
    border-width: 7px 0 0;
    padding: 0 0 0 100px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .4);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}
::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .3);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:horizontal {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .6);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, .75);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .035);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .07);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb:horizontal {
    border-width: 6px 0 1px
}
::-webkit-scrollbar-corner {
    background: transparent
}
body::-webkit-scrollbar-track-piece {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 0 0 0 3px;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-track-piece:horizontal {
    border-width: 3px 0 0;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-thumb {
    border-width: 1px 1px 1px 5px
}
body::-webkit-scrollbar-thumb:horizontal {
    border-width: 5px 1px 1px
}
body::-webkit-scrollbar-corner {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 3px 0 0 3px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}
.jfk-scrollbar::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px
}
.jfk-scrollbar::-webkit-scrollbar-button {
    height: 0;
    width: 0
}
.jfk-scrollbar::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
    border-width: 7px 0 0
}
.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}
.jfk-scrollbar::-webkit-scrollbar-track:active {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:active {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 7px 0 0;
    padding: 0 0 0 100px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .4);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .3);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .6);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, .75);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .035);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .07);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar::-webkit-scrollbar-corner {
    background: transparent
}
body.jfk-scrollbar::-webkit-scrollbar-track-piece {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 0 0 0 3px;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body.jfk-scrollbar::-webkit-scrollbar-track-piece:horizontal {
    border-width: 3px 0 0;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body.jfk-scrollbar::-webkit-scrollbar-thumb {
    border-width: 1px 1px 1px 5px
}
body.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 5px 1px 1px
}
body.jfk-scrollbar::-webkit-scrollbar-corner {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 3px 0 0 3px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}

<div class="testg">
    <div class="content">
        Look Ma'  my scrollbars doesn't have arrows <br /><br />
        content, content, content <br /> content, content, content <br /> content, content, content s<br />  content, content, content <br/> content, content, content <br/> content, content, content d<br/>  content, content, content <br/> 
    </div>
</div>
<br/>
<div class="testg jfk-scrollbar jfk-scrollbar-borderless jfk-scrollbar-dark">
    <div class="content">
        Look Ma'  my scrollbars dissapear in chrome<br /><br />
        content, content, content <br /> content, content, content <br /> content, content, content s<br />  content, content, content <br/> content, content, content <br/> content, content, content d<br/>  content, content, content <br/> 
    </div>
</div>

스 니펫 확장

http://jsfiddle.net/76kcuem0/32/

스크롤 막대에서 화살표를 제거하는 것이 유용하다는 것을 알았습니다. 2015 년 기준으로 소재 디자인 UI의 결과 목록에서 장소를 검색 할 때 Google지도에서 사용되었습니다.

— le0diaz
소스

1

웹킷 스크롤 막대는 대부분의 브라우저에서 지원되지 않습니다.

CHROME 지원

다음은 웹킷 스크롤 막대 데모입니다. 웹킷 스크롤 막대 데모

더 많은 예를 찾고 있다면이 더 많은 예를 확인하십시오.

또 다른 방법은 Jquery Scroll Bar Plugin입니다.

모든 브라우저에서 지원되며 적용하기 쉽습니다.

여기 에서 다운로드에서 플러그인을 다운로드하십시오.

사용 방법 및 추가 옵션 이 항목 을 확인하십시오

데모

— 니즈
소스

1

나는 많은 JS와 CSS 스크롤을 시도했지만 IE와 Safari 및 FF에서 사용하고 테스트하기가 매우 쉽고 잘 작동한다는 것을 알았습니다.

@thebluefox가 제안한대로

작동 방식은 다음과 같습니다.

아래 스크립트를

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="facescroll.js"></script>

<script type="text/javascript">
    jQuery(function(){ // on page DOM load
        $('#demo1').alternateScroll();
        $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });  
    })
</script>

그리고 여기 스크롤해야 할 단락에서

<div id="demo1" style="width:300px; height:250px; padding:8px; resize:both; overflow:scroll">
**Your Paragraph Comes Here**
</div>

자세한 내용은 플러그인 페이지를 방문하십시오

FaceScroll 사용자 정의 스크롤 막대

그것이 도움이되기를 바랍니다.

— 유세프 알 타프
소스

0

여전히 좋은 솔루션을 찾고있는 사람들을 위해이 플러그인 simplebar를 발견했습니다.

기본 스크롤이있는 사용자 정의 스크롤바 바닐라 자바 스크립트 라이브러리, 단순하고 가벼우 며 사용하기 쉽고 크로스 브라우저가 가능합니다.

필자의 경우 reactJS 솔루션을 찾고 있었고 저자는 반응, 각도, vue 및 다음 예제를 위한 래퍼도 제공합니다.

— ManBearPig
소스

0

웹킷 브라우저 (예 : Chrome, Safari 및 Opera)는 비표준 ::-webkit-scrollbar pseudo 요소를 지원하므로 브라우저 스크롤 막대의 모양을 수정할 수 있습니다.

참고 : :: - 웹킷 - 스크롤은 파이어 폭스 나 IE와 에지를 지원하지 않습니다.

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

div {
  width: 15rem;
  height: 8rem;
  padding: .5rem;
  border: 1px solid #aaa;
  margin-bottom: 1rem;
  overflow: auto;
}

.box::-webkit-scrollbar {
  width: .8em;
}

.box::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
 
.box::-webkit-scrollbar-thumb {
  background-color: dodgerblue;
}

<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>

스 니펫 확장

참조 : 사용자 정의 스크롤 막대를 만드는 방법

— 비샬
소스

0

Firefox +64에서 CSS 만 사용

.mycoldiv{
    scrollbar-color: white rebeccapurple;
    scrollbar-width: thin;
    display: block;
    height:400px;
    overflow-x: auto;
}

자세한 정보 : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

— 니마 사 데기
소스

0

div가 다음과 같다고 가정하십시오.

<div class="custom_scroll"> ... </div>

CSS 스타일을 다음과 같이 적용

//custom scroll style definitions
.custom_scroll
{
  overflow-y: scroll;
}

//custom_scroll scrollbar styling
.custom_scroll::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    opacity: 0.5;
    //background-color: #F5F5F5;
}

.custom_scroll::-webkit-scrollbar
{
    width: 5px;
    opacity: 0.5;
    //background-color: #F5F5F5;
}

.custom_scroll::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    opacity: 0.5;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    //background-color: #555;
}

결과 스크롤은 다음과 같이 나타납니다

— Saumyajit
소스

-1

또는 다음과 같은 것을 사용하십시오.

var MiniScroll=function(a,b){function e(){c.scrollUpdate()}function f(){var a=new Date,b=Math.abs(a-c.animation.frame),d=c.countScrollHeight();c.animation.frame=a,c.render(b),d.height!=c.controls.height&&(e(),c.controls.height=d.height),requestAnimationFrame(f)}function g(){c.scrollUpdate()}function h(a){var b=c.target.scrollTop,d=Math.abs(a.wheelDeltaY/(10-c.speed));c.target.scrollTop=a.wheelDeltaY>0?b-d:b+d,c.scrollUpdate()}function i(a){if(a.target.classList.contains("scroll"))return a.preventDefault(),!1;var b=c.countScrollHeight();c.target.scrollTop=a.offsetY*b.mul-parseInt(b.height)/2,c.scrollUpdate()}b=b||{};var c=this,d={speed:"speed"in b?b.speed:7};this.target=document.querySelector(a),this.animation={frame:new Date,stack:[]},this.identity="scroll"+parseInt(1e5*Math.random()),this.controls={place:null,scroll:null,height:0},this.speed=d.speed,this.target.style.overflow="hidden",this.draw(),requestAnimationFrame(f),this.target.onscroll=g,this.target.addEventListener("wheel",h),this.controls.place.onclick=i};MiniScroll.prototype.scrollUpdate=function(){this.controls.place.style.height=this.target.offsetHeight+"px";var a=this.countScrollHeight();this.controls.scroll.style.height=a.height,this.controls.scroll.style.top=a.top},MiniScroll.prototype.countScrollHeight=function(){for(var a=this.target.childNodes,b=parseInt(this.target.offsetHeight),c=0,d=0;d<a.length;d++)a[d].id!=this.identity&&(c+=parseInt(a[d].offsetHeight)||0);var e=this.target.offsetHeight*parseFloat(1/(parseFloat(c)/this.target.offsetHeight)),f=this.controls.place.offsetHeight*(this.target.scrollTop/c)+"px";return{mul:c/this.target.offsetHeight,height:e>b?b+"px":e+"px",top:f}},MiniScroll.prototype.draw=function(){var a=document.createElement("div"),b=document.createElement("div");a.className="scroll-place",b.className="scroll",a.appendChild(b),a.id=this.identity,this.controls.place=a,this.controls.scroll=b,this.target.insertBefore(a,this.target.querySelector("*")),this.scrollUpdate()},MiniScroll.prototype.render=function(a){for(var b=0;b<this.animation.stack.length;b++){var c=this.animation.stack[b],d=parseInt(c.target);c.element.style[c.prop]=d+c.points}};

그리고 초기화하십시오 :

<body onload="new MiniScroll(this);"></body>

그리고 사용자 정의하십시오.

.scroll-place { // ... // }
.scroll { // ... // }

— Максим Владимирович
소스

div의 CSS 사용자 정의 스크롤 막대

스크롤 바 CSS 지원

마이크로 소프트

크롬 & 사파리 (WebKit)

파이어 폭스 (Gecko)

크로스 브라우저 스크롤 막대 스타일링

불법 스크롤 막대 스타일링 방지

중복되거나 유사한 질문 / 소스가 연결되지 않았습니다