Comments on: Creating custom scrollbars with CSS; How CSS isn’t great for every task http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task blogging about life, the universe, and everything tech Sat, 08 Sep 2012 07:06:53 -0700 http://wordpress.org/?v=2.8.4 hourly 1 By: Nesma http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task/comment-page-1#comment-48887 Nesma Fri, 04 May 2012 14:57:05 +0000 http://almaer.com/blog/?p=2359#comment-48887 Thanks a lot .. I try learning CSS gradually and this is a big help for me! I tried using it here .. http://soulfight-a-devianty.deviantart.com/journal/Devious-Journal-Entry-224732884 Thanks a lot .. I try learning CSS gradually and this is a big help for me!

I tried using it here .. http://soulfight-a-devianty.deviantart.com/journal/Devious-Journal-Entry-224732884

]]> By: Tuukka Virtaperko http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task/comment-page-1#comment-48849 Tuukka Virtaperko Thu, 29 Mar 2012 04:38:22 +0000 http://almaer.com/blog/?p=2359#comment-48849 Didn't work, unfortunately. I probably need to call the scrollbar somehow, but don't know how. All I knew how to do was to copypaste all that into style.css. I know how to edit the CSS itself, but I don't know how to assign that CSS as the scrollbar of a certain div. Didn’t work, unfortunately. I probably need to call the scrollbar somehow, but don’t know how. All I knew how to do was to copypaste all that into style.css. I know how to edit the CSS itself, but I don’t know how to assign that CSS as the scrollbar of a certain div.

]]> By: ThinkManify http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task/comment-page-1#comment-48808 ThinkManify Tue, 21 Feb 2012 17:50:51 +0000 http://almaer.com/blog/?p=2359#comment-48808 @dion: In my own website, I built in a styleswitcher by dynamicdrive.com - it allows you to make a list of styles, and when clicked, change the overall style of the whole webpage. URL: http://dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm BTW: This is awesome. @dion: In my own website, I built in a styleswitcher by dynamicdrive.com – it allows you to make a list of styles, and when clicked, change the overall style of the whole webpage. URL: http://dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

BTW: This is awesome.

]]> By: Steve http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task/comment-page-1#comment-48794 Steve Tue, 07 Feb 2012 15:31:54 +0000 http://almaer.com/blog/?p=2359#comment-48794 demo of the solution can be found (probably not long term) at worknetnow.com/demo/webkit-custom-scrollbars.htm demo of the solution can be found (probably not long term) at worknetnow.com/demo/webkit-custom-scrollbars.htm

]]> By: Steve http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task/comment-page-1#comment-48793 Steve Mon, 06 Feb 2012 21:23:48 +0000 http://almaer.com/blog/?p=2359#comment-48793 Got the three part thumb to work. The trick is the background-clip property. You set a transparent background (or padding, if you prefer [both work]) to the height of one of the end caps, and set their position as appropriate; no-repeat. The real trick is the center piece. For the center piece, you set background-clip:content-box; the end caps are set to background-clip:border-box (or padding-box if you used padding for spacing). This way, the size of the box really only controls the size of the center segment... even if size is set to 0, the end caps will still show up. Seems to work pretty flawlessly. Will attempt to paste code, but will probably get code-sniffer-nipped. #test { padding:25px 0px; /* Padding = Height of one cap */ height:200px; width:50px; /* width = width of cap */ background:url(thumbTop.png), url(thumbMiddle.png), url(thumbBottom.png); background-position:top left, top left, bottom left; /* background size of individual pieces. Middle height irrelevant */ background-size:50px 25px, 50px 0px, 50px 25px; background-repeat: no-repeat, repeat-y, no-repeat; background-clip: padding-box, content-box, padding-box; background-origin:padding-box; } Got the three part thumb to work. The trick is the background-clip property.

You set a transparent background (or padding, if you prefer [both work]) to the height of one of the end caps, and set their position as appropriate; no-repeat. The real trick is the center piece.

For the center piece, you set background-clip:content-box; the end caps are set to background-clip:border-box (or padding-box if you used padding for spacing).

This way, the size of the box really only controls the size of the center segment… even if size is set to 0, the end caps will still show up.

Seems to work pretty flawlessly.

Will attempt to paste code, but will probably get code-sniffer-nipped.

#test
{
padding:25px 0px;

/* Padding = Height of one cap */

height:200px;
width:50px;

/* width = width of cap */

background:url(thumbTop.png), url(thumbMiddle.png), url(thumbBottom.png);
background-position:top left, top left, bottom left;

/* background size of individual pieces. Middle height irrelevant */
background-size:50px 25px, 50px 0px, 50px 25px;

background-repeat: no-repeat, repeat-y, no-repeat;
background-clip: padding-box, content-box, padding-box;
background-origin:padding-box;
}

]]> By: Web Design Watford http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task/comment-page-1#comment-48681 Web Design Watford Tue, 13 Dec 2011 18:20:58 +0000 http://almaer.com/blog/?p=2359#comment-48681 Glad I stumbled across this site, been looking for a way to modify the standard CSS overflow scrollbar and will be trying this out on our newest build - will let you know how we get on! Glad I stumbled across this site, been looking for a way to modify the standard CSS overflow scrollbar and will be trying this out on our newest build – will let you know how we get on!

]]> By: Japa Alekhin http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task/comment-page-1#comment-48065 Japa Alekhin Thu, 24 Mar 2011 05:46:30 +0000 http://almaer.com/blog/?p=2359#comment-48065 hi i'm looking for a way to create a really custom scrollbar... i have an idea to create custom divs and graphics and make it work through js/jquery.. but i'm trying to look for a more non-troublesome way... hi i’m looking for a way to create a really custom scrollbar… i have an idea to create custom divs and graphics and make it work through js/jquery.. but i’m trying to look for a more non-troublesome way…

]]> By: Matthieu http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task/comment-page-1#comment-48014 Matthieu Mon, 07 Mar 2011 05:35:01 +0000 http://almaer.com/blog/?p=2359#comment-48014 Address changed: www.nightmaredream.com all in a short :P Scroll theme still work well today :) Address changed: http://www.nightmaredream.com all in a short :P
Scroll theme still work well today :)

]]> By: Matthieu http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task/comment-page-1#comment-47666 Matthieu Thu, 25 Nov 2010 02:52:56 +0000 http://almaer.com/blog/?p=2359#comment-47666 please keep that comment hidden too... i have a hard time with using this to resize a div inside a skinned div... On the right side, when i select a corner and move it, the vertical slidebar moves a step of its own size on the left and leave a blank space of its size on the right... I'm trying to deal with it but it currently displays like "this http://www.nightmaredream.com/Sanstitre-4.html " This tool really makes my year! With this bars-kit i will really end up with a perfect page :) Another question that i may get answered if i read the post again is.. how can i add repeat regions to the scrollbar's background? I'd like to make a black and white candycane style background that would mirror to center and i'd like it to repeat x or y :) Well... i whish my communication method of asking to publish not the comment doesn't incomfort you... :P please keep that comment hidden too… i have a hard time with using this to resize a div inside a skinned div… On the right side, when i select a corner and move it, the vertical slidebar moves a step of its own size on the left and leave a blank space of its size on the right… I’m trying to deal with it but it currently displays like “this http://www.nightmaredream.com/Sanstitre-4.html ”

This tool really makes my year! With this bars-kit i will really end up with a perfect page :)

Another question that i may get answered if i read the post again is.. how can i add repeat regions to the scrollbar’s background? I’d like to make a black and white candycane style background that would mirror to center and i’d like it to repeat x or y :)

Well… i whish my communication method of asking to publish not the comment doesn’t incomfort you… :P

]]> By: Web Design Brisbane http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task/comment-page-1#comment-47509 Web Design Brisbane Fri, 29 Oct 2010 09:32:31 +0000 http://almaer.com/blog/?p=2359#comment-47509 I have been using this on one of our chrome only SAAS's, and noticed recently that the actual draggable / scrollable part of the scroll bar has been warped and is now a little thinner? Any thoughts? I have been using this on one of our chrome only SAAS’s, and noticed recently that the actual draggable / scrollable part of the scroll bar has been warped and is now a little thinner? Any thoughts?

]]>