How to change scrollbar - CSS-Tricks

This topic is empty.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
June 5, 2013 at 6:13 am #45303

jorno
Member

Hi,

I would like to change the scrollbar in the following code. Can anybody help me with that?

Thanks!

2013

13 september   De Vest,          Alkmaar

22 september   Blauwe Zaal,   Utrecht

24 september   Schouwburg,   Leiden

25 september   Schouwburg,   Eindhoven

28 september   Posthuis           Heerenveen

29 september Theater Bellevue, Amsterdam

11 oktober Orpheus, Apeldoorn

June 5, 2013 at 6:21 am #137706

Historical Forums User
Participant

You can only do it in css with webkit. Else you need to do it with javascript.
[Webkit](https://css-tricks.com/custom-scrollbars-in-webkit/ “https://css-tricks.com/custom-scrollbars-in-webkit/”)

June 5, 2013 at 7:03 am #137713

jorno
Member

Can it be done with javascript within this code?

June 5, 2013 at 7:25 am #137715

Historical Forums User
Participant

With some Googeling i’ve found [this link](http://gondo.webdesigners.sk/javascript-scrollbar/ “http://gondo.webdesigners.sk/javascript-scrollbar/”).

Is it the implementation you are unsure how to do?

June 5, 2013 at 7:38 am #137720

jorno
Member

Yeah, i’m very new to this. Could you show it to me in the code above?

June 5, 2013 at 7:53 am #137722
Historical Forums User
Participant
```
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
		* {
			color:red;
			font-family:"Futura","Times New Roman", Times, serif;
			text-shadow: 1px 1px #000000;
		}
		.scrollholder{
			position: relative;
			width: 300px; height: 200px;
			overflow: auto;
			z-index: 1;
			background-color: #f3f3f3;
		}
		.scroll{
			position: absolute;
			left: 0; top: 0;
			width: 95%;
			z-index: 2;
		}
		/* <Scroll> */
		.track{
			position: relative;
			float:right;
			top: 0; 
			width: 11px; height: 100%;
			font-size: 0;
			z-index: 3;
			background: black;
		}
		.drag_bar{
			position: absolute;
			width: 100%; height: 14px;
			cursor: pointer;
			z-index: 4;
			background: yellow;
		}  
    </style>
	<script src="http://gondo.webdesigners.sk/wp-content/javascript-scrollbar/js/scroll.js"></script>
</head>
<body>
	<div id="scrollholder" class="scrollholder">
		<div id="scroll" class="scroll">
			<p>your text...</p>
		</div>
	</div>
	<script>ScrollLoad ("scrollholder", "scroll", true);</script>
</body>
</html>
```
June 5, 2013 at 7:58 am #137724

Historical Forums User
Participant

Try to Google some about this and read. It’s important that you understand the basics about what is happening in the code above. This solution isn’t the best and it’s not “best practice” to alter the scrollbars design.

June 5, 2013 at 8:02 am #137725

Paulie_D
Member

Especially since this:

2013

13 september   De Vest,          Alkmaar

22 september   Blauwe Zaal,   Utrecht

24 september   Schouwburg,   Leiden

25 september   Schouwburg,   Eindhoven

28 september   Posthuis           Heerenveen

29 september Theater Bellevue, Amsterdam

11 oktober Orpheus, Apeldoorn

…is very bad HTML.

June 5, 2013 at 8:32 am #137730

jorno
Member

Thanks adahei!

And Paulie D, I know, but just started. Is there a good tutorial you can recommend?
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

The forum ‘CSS’ is closed to new topics and replies.