css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>scrollbars design test</title>
</head>
<body>	
	<h1>Scrollbars Design Test</h1>
	<div class="continer">
		<div class="item">
			<p class="innerText">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, dolore, fugiat tempora explicabo, beatae possimus magni placeat nihil illum eligendi blanditiis inventore alias magnam repellat! Ipsum quibusdam saepe commodi neque veniam dolorem fugit deleniti impedit expedita quia, laboriosam voluptatem aspernatur labore animi quo similique fuga suscipit, consectetur minima eius cum?</p>
		</div>

		<hr>

		<div class="item" id="item_01">
			<p class="innerText">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis nemo officia, eum voluptatum at, accusamus quod provident dolor perferendis, praesentium optio. Culpa, aliquam quibusdam consequatur non vel eos veniam aspernatur laudantium molestiae quidem dolores earum pariatur dicta iste itaque modi temporibus hic a facilis nisi praesentium? Esse aspernatur earum commodi!</p>
		</div>
		<div class="item" id="item_02">
			<p class="innerText">Molestias quis cum ad dolores consequatur libero vero delectus voluptas quaerat dolore recusandae beatae animi optio dolorum, accusantium aliquam ipsam! Alias facere impedit repellendus? Quod, aperiam explicabo? Expedita recusandae, velit enim inventore, distinctio nobis animi quo accusamus earum aliquid tenetur veritatis nihil dolorem cum nostrum pariatur ab omnis quidem deserunt.</p>
		</div>
		<div class="item" id="item_03">
			<p class="innerText">Sit excepturi iusto adipisci voluptas neque commodi fuga deleniti, omnis a aspernatur eius quae recusandae, libero veniam minima culpa totam eveniet itaque quis tempora quasi praesentium quia! Obcaecati quibusdam mollitia beatae voluptatibus doloribus nulla sapiente explicabo iusto porro voluptas distinctio, perferendis at provident recusandae fugit consequuntur. Nam inventore architecto blanditiis.</p>
		</div>
		<div class="item" id="item_04">
			<p class="innerText">Sapiente eveniet asperiores nulla id deleniti non unde nemo doloribus tempora perferendis eos quam, voluptates, optio qui laborum. Repellat alias nesciunt fugit laborum ducimus? Commodi sit dignissimos doloribus ipsa mollitia itaque debitis! Illo quidem alias cumque, numquam, officiis ratione asperiores sint voluptates eveniet unde quo illum, voluptatum ullam tenetur natus.</p>
		</div>
		<div class="item" id="item_05">
			<p class="innerText">Quisquam, iste atque illum cupiditate quis ducimus amet consequuntur possimus autem quo tempora officiis libero enim nostrum mollitia accusamus, quod provident labore repudiandae aspernatur doloribus? Tempore sed inventore nesciunt vel adipisci commodi veniam rerum vero reiciendis odio officiis reprehenderit, omnis corrupti porro nemo eum recusandae molestias fuga incidunt, sequi maiores?</p>
		</div>
		<div class="item" id="item_06">
			<p class="innerText">Qui asperiores iusto deserunt reprehenderit rem repudiandae quas voluptatibus laudantium? Temporibus debitis placeat vel esse impedit quam magni, voluptas nulla magnam doloribus velit quidem iure? Voluptatibus voluptatem labore ipsam ex, repudiandae nisi similique. Quaerat incidunt illo eaque? Quam error excepturi praesentium vitae harum, sunt doloribus, aspernatur inventore, eius tempora magnam.</p>
		</div>
		
		<hr>
		
		<div class="item" id="item_07">
			<p class="innerText">Architecto explicabo quibusdam neque ipsam ut voluptatem. Fugiat sit nostrum debitis sint? Voluptatibus tempora eos nesciunt quae blanditiis asperiores sit maiores a, cupiditate nemo ipsa. Saepe eius nemo et itaque tempora blanditiis hic modi officia ullam distinctio, placeat quas tenetur sunt obcaecati veritatis? Vero excepturi velit consequatur, exercitationem amet iusto?</p>
		</div>
		<div class="item" id="item_08">
			<p class="innerText">Laboriosam soluta nobis qui et sed rerum culpa unde autem rem quibusdam laborum doloribus maiores blanditiis quisquam voluptatibus eius maxime necessitatibus id, tempora hic provident cumque. Nobis temporibus corporis vero enim harum maiores vitae. Error animi debitis voluptatum quaerat corrupti tenetur aliquam aperiam itaque, sint facilis provident, ea incidunt. Libero.</p>
		</div>
		<div class="item" id="item_09">
			<p class="innerText">Blanditiis earum, modi a id vitae error saepe excepturi consequatur iste corporis, eum fugiat iure deserunt tempore nulla assumenda laudantium aperiam possimus eius non at distinctio veritatis eligendi suscipit! Debitis, ullam fugiat libero voluptatum vero quos sint est ipsa sapiente dolorum illum? Qui magni quos est vitae dignissimos at molestiae!</p>
		</div>
		<div class="item" id="item_10">
			<p class="innerText">Eos inventore laborum voluptate amet quos explicabo perferendis necessitatibus, earum impedit unde! Doloremque vitae assumenda facilis exercitationem omnis sequi minus, quis minima repudiandae cumque aspernatur corporis dolorum possimus reprehenderit harum dolores voluptate ratione in officia voluptas reiciendis! Quibusdam, laboriosam illo officiis culpa sint quaerat officia voluptatum, nesciunt ut, sequi quasi?</p>
		</div>
<!-- 		<div class="item" id="item_11">
			<p class="innerText">Quae molestiae quidem sapiente, praesentium dolorum nostrum saepe asperiores quos veniam expedita adipisci, sed illo nesciunt reprehenderit dolore earum ullam mollitia totam possimus. Quaerat, perspiciatis voluptates. Deleniti, distinctio accusamus eveniet vel optio pariatur blanditiis aut quo modi reprehenderit molestias voluptas nesciunt assumenda ad nihil itaque et deserunt! Corrupti, itaque veniam.</p>
		</div>
		<div class="item" id="item_12">
			<p class="innerText">A, quaerat officiis! Id suscipit quis deserunt, nam, ea labore quos ratione soluta eligendi, quia doloremque. Eos id numquam illo quis ratione corporis veritatis expedita repellendus aliquam, voluptatibus ab eaque. Deleniti reiciendis, quaerat consequuntur ipsa error modi a eveniet libero, rem porro totam ea labore voluptatum illum esse voluptatem beatae?</p>
		</div>
		<div class="item" id="item_13">
			<p class="innerText">Beatae veritatis minima sapiente molestiae magnam fuga expedita soluta, sed, ab dignissimos porro et nemo esse error consectetur labore, accusantium unde repellendus autem nihil commodi odit rerum? Corrupti aperiam ut deleniti inventore aut nobis. Quo quidem quae exercitationem optio, accusantium earum aspernatur facilis asperiores nostrum saepe odit, ratione similique eligendi!</p>
		</div>
		<div class="item" id="item_14">
			<p class="innerText">Dolores voluptatum necessitatibus quos unde repellendus libero possimus, cumque officiis animi id eum in facere architecto rem quasi suscipit! Esse harum blanditiis veniam, repellat animi consequuntur optio exercitationem qui excepturi eum voluptates cupiditate officiis laboriosam molestiae molestias? Explicabo culpa facere magnam eveniet praesentium corporis! Ad placeat ipsam soluta reprehenderit natus?</p>
		</div>
		<div class="item" id="item_15">
			<p class="innerText">Vero vitae itaque rem, odit nemo odio, molestiae quod possimus ullam officiis sint corporis consequuntur, natus optio quam. Eos modi, distinctio accusantium molestiae non deleniti rem eligendi quisquam, sunt suscipit rerum delectus quos cupiditate quasi sequi? Pariatur nisi laudantium consequatur? Explicabo fugit quasi est, nostrum similique distinctio harum aliquam obcaecati.</p>
		</div>
		<div class="item" id="item_16">
			<p class="innerText">Voluptatum velit nisi numquam temporibus, hic explicabo exercitationem alias praesentium, similique dicta mollitia! Rerum laudantium quia quasi officiis eius omnis minima iure adipisci assumenda asperiores quas expedita suscipit, impedit officia, magnam autem maxime reiciendis tempora dolorum repudiandae. Sunt excepturi quidem animi quod provident voluptatibus. Placeat dolore at sequi sunt ducimus?</p>
		</div>
		<div class="item" id="item_17">
			<p class="innerText">Aliquam amet earum voluptates maxime distinctio ab nisi? Rerum dolores veniam ab iure beatae consequuntur facilis aut nam sapiente totam odit eaque doloribus nisi voluptatem adipisci illo, id et dignissimos maxime! Quaerat cupiditate esse voluptates iusto officiis quia delectus velit fugiat est minima. Delectus, doloremque esse ad maxime excepturi reprehenderit?</p>
		</div>
		<div class="item" id="item_18">
			<p class="innerText">Dolorem eligendi accusantium sequi quasi a qui perferendis, quo dicta similique culpa? Architecto doloribus deleniti corporis voluptate dolorum officia dolor exercitationem molestias sunt distinctio deserunt et alias, quibusdam eos nostrum eum corrupti. Labore ipsum architecto doloremque quidem similique? At perspiciatis ipsa amet eaque sapiente quos modi vitae distinctio voluptates a!</p>
		</div>
		<div class="item" id="item_19">
			<p class="innerText">Reiciendis exercitationem officiis magnam quam doloremque inventore veritatis! Dolorum maiores aspernatur doloribus. Labore tenetur, deserunt sed debitis odio consequatur, magnam blanditiis maiores asperiores, optio quibusdam rem nisi dignissimos? Eveniet nemo voluptates, optio, similique quasi earum aut corrupti maiores qui modi totam. Quis praesentium eum officia, consequatur eligendi commodi? Ad, distinctio.</p>
		</div>
		<div class="item" id="item_20">
			<p class="innerText">Necessitatibus laborum id tenetur beatae optio rerum eveniet voluptates porro similique reiciendis distinctio accusamus aliquid, culpa perferendis odit veniam rem, dolorum doloribus eum magnam, asperiores architecto! Sapiente ea optio culpa eum est, provident perspiciatis corrupti omnis eaque inventore, enim pariatur eveniet nihil architecto maxime id deleniti, dolorum recusandae assumenda quas!</p>
		</div>
		<div class="item" id="item_21">
			<p class="innerText">Suscipit nemo saepe odit molestias, dolor numquam atque, quod mollitia quam dignissimos beatae officia reiciendis quas maxime! Nobis iste perspiciatis molestias eveniet deleniti voluptates dolore similique quibusdam eos beatae earum in magnam dolorem laboriosam itaque alias, ad quisquam aliquid. Fugit rerum dolores velit, consequatur exercitationem laborum illum commodi ea laboriosam.</p>
		</div>
		<div class="item" id="item_22">
			<p class="innerText">Itaque consectetur aperiam ex aliquam. Dolor recusandae reiciendis distinctio repudiandae excepturi nulla ratione labore placeat cumque aliquid facilis illo veritatis perspiciatis sed, molestias earum pariatur veniam perferendis voluptates quaerat iure blanditiis! Itaque amet perferendis accusantium quidem, possimus vitae dolores ducimus nulla delectus eum nesciunt iusto, mollitia, necessitatibus est minima aspernatur.</p>
		</div>
		<div class="item" id="item_23">
			<p class="innerText">Optio repellat dolores dolor ipsum molestiae excepturi autem, consectetur fuga nostrum at, nisi veniam obcaecati, qui maiores rerum voluptas distinctio. Alias, maiores sint magni exercitationem unde explicabo perferendis inventore autem accusantium voluptatem rem quaerat dolor maxime nam facere? Impedit nulla perferendis iure cupiditate tempora facere sapiente maiores molestias eum debitis.</p>
		</div>
		<div class="item" id="item_24">
			<p class="innerText">Voluptatum unde nesciunt neque aliquam laborum expedita, qui quod at distinctio iste tenetur ab laboriosam consequatur cupiditate aperiam corrupti quidem recusandae reiciendis. Quas maiores perspiciatis fugiat esse consequatur temporibus magni. Fugiat molestias quas ratione soluta accusamus, cupiditate, inventore labore corporis sequi quae illum incidunt illo? Mollitia harum animi officiis officia?</p>
		</div>
		<div class="item" id="item_25">
			<p class="innerText">Corporis officiis eveniet laboriosam ratione facere incidunt dignissimos modi culpa deleniti, consectetur numquam consequatur! Ullam itaque dolorum tenetur explicabo! Voluptatibus eveniet dolore omnis maxime quos, perspiciatis facere blanditiis architecto repudiandae ratione consectetur id sit soluta pariatur in labore iure laudantium et minima modi tempora? Eius tempore debitis expedita est ratione?</p>
		</div>
		<div class="item" id="item_26">
			<p class="innerText">Vel vitae voluptates voluptas voluptatum repellendus eius culpa expedita tenetur eligendi fugiat, nostrum non harum quam, officia nemo repudiandae atque nobis amet saepe itaque quidem voluptatem aliquid adipisci? Cumque animi autem esse minima laboriosam vitae, error doloremque nam, reiciendis, dolores ipsam. Sunt eligendi, culpa inventore recusandae neque totam. Numquam, porro.</p>
		</div>
		<div class="item" id="item_27">
			<p class="innerText">Eaque saepe reprehenderit, neque velit, reiciendis veniam similique omnis provident vero ipsam perspiciatis est ad mollitia qui culpa nihil minima error! Molestiae veritatis necessitatibus nam veniam vero ratione consequuntur magnam praesentium quo ullam error dolorem voluptates sit perspiciatis accusamus, tempore, sequi aut! Iste deserunt ab magni voluptatibus neque nihil ad?</p>
		</div>
		<div class="item" id="item_28">
			<p class="innerText">Quam obcaecati labore voluptate doloremque adipisci quis veritatis dolor perspiciatis dolorem eum architecto excepturi, atque, numquam ullam, fugit reiciendis nesciunt quaerat iste modi reprehenderit distinctio. Doloremque aliquid expedita neque nobis suscipit! Rem assumenda exercitationem placeat ab ad sapiente! Unde repellendus architecto quisquam aperiam magnam at minima sunt ab molestias pariatur?</p>
		</div>
		<div class="item" id="item_29">
			<p class="innerText">Atque officiis, quae voluptates at voluptas accusantium, nisi obcaecati iure, recusandae natus doloremque adipisci. Nemo impedit, animi nihil accusamus corporis, sapiente itaque natus incidunt aut sed ipsam sit. Saepe cupiditate fugit voluptate nulla minima nihil magnam! Reiciendis tempore commodi, incidunt dolor magnam odit fuga? Dolor velit iure quos aperiam odio?</p>
		</div>
		<div class="item" id="item_30">
			<p class="innerText">Nulla dolore hic inventore non aspernatur molestiae sit dolor sunt odit doloremque, assumenda exercitationem tempore. Expedita, voluptates? Ipsa asperiores perferendis, esse ad aut, vel explicabo, ex dignissimos harum eius labore id? Dignissimos sit ullam dicta, doloremque porro nihil iusto veniam voluptatum magnam similique cupiditate, ut molestias adipisci velit nisi aut.</p>
		</div> -->
	</div>
</body>
</html>
            
          
!
            
              .item {
  border: 1px solid #888;
  border-radius: 3px;
  height: 100px;
  margin: 20px 30px;
  overflow-y: scroll;
  width: 100%;
  max-width: 300px;
}

#item_01::-webkit-scrollbar{
  width: 12px;
}
#item_01::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  box-shadow: inset 0 0 2px #777; 
}
#item_01::-webkit-scrollbar-thumb{
  background: #aaa;
  box-shadow: none;
}

#item_02::-webkit-scrollbar{
  width: 12px;
}
#item_02::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  box-shadow: inset 0 0 2px #777; 
}
#item_02::-webkit-scrollbar-thumb{
  background: #e91e63;
  box-shadow: none;
}

#item_03::-webkit-scrollbar{
  width: 12px;
}
#item_03::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  box-shadow: inset 0 0 2px #777; 
}
#item_03::-webkit-scrollbar-thumb{
  background: #3f51b5;
  box-shadow: none;
}

#item_04::-webkit-scrollbar{
  width: 12px;
}
#item_04::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  box-shadow: inset 0 0 2px #777; 
}
#item_04::-webkit-scrollbar-thumb{
  background: #4caf50;
  box-shadow: none;
}

#item_05::-webkit-scrollbar{
  width: 12px;
}
#item_05::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 2px #777; 
}
#item_05::-webkit-scrollbar-thumb{
  background: #aaa;
  border-radius: 10px;
  box-shadow: none;
}

#item_06::-webkit-scrollbar{
  width: 20px;
}
#item_06::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  box-shadow: inset 0 0 2px #777; 
}
#item_06::-webkit-scrollbar-thumb{
  background: #ff9800;
  box-shadow: none;
}
#item_06::-webkit-scrollbar-thumb:hover {
	background-color: #ff5722;
}

#item_07{
	overflow-x: scroll;
}
#item_07::-webkit-scrollbar {
	width: 20px;
}
#item_07::-webkit-scrollbar-track{
	background:repeating-linear-gradient(#64b5f6 0, #64b5f6 3px, #e2e7eb 3px, #e2e7eb 6px);
}
#item_07::-webkit-scrollbar-track:horizontal{
	background:repeating-linear-gradient(90deg, #64b5f6 0, #64b5f6 3px, #e2e7eb 3px, #e2e7eb 6px);
}
#item_07::-webkit-scrollbar-thumb{
	background-color: #2286c3;
}

#item_08{
	overflow-x: scroll;
}
#item_08::-webkit-scrollbar {
	width: 20px;
}
#item_08::-webkit-scrollbar-track{
	background:repeating-linear-gradient(-45deg, #ff9800 0, #ff9800 10px, #e2e7eb 10px, #e2e7eb 20px);
}
#item_08::-webkit-scrollbar-thumb{
	background-color: #ff5722;
}

#item_09{
	overflow-x: scroll;
}
#item_09::-webkit-scrollbar {
	width: 20px;
}
#item_09::-webkit-scrollbar-track {
	border: 1px solid #29b6f6;
	background-color: #fff;
 background-image: radial-gradient(#29b6f6 10%, transparent 20%), radial-gradient(#29b6f6 10%, transparent 20%);
 background-size: 20px 20px;
 background-position: 0 0, 10px 10px;
}
#item_09::-webkit-scrollbar-thumb {
	background-color: #29b6f6;
}

#item_10::-webkit-scrollbar {
	width: 20px;
}
#item_10::-webkit-scrollbar-track{
	background:repeating-linear-gradient(45deg, #64b5f6 0, #64b5f6 3px, #e2e7eb 3px, #e2e7eb 6px);
}
#item_10::-webkit-scrollbar-track:hover {
	background: #90caf9;
}
#item_10::-webkit-scrollbar-thumb{
	background-color: #2286c3;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console