Styling scrollbar

Download VS 2008 demo projectA while ago, I was looking at the Infragistics WPF showcase, Tangerine and I was quite jealous about the scrollbars that they managed to use. I mean styling a Button is one thing, but the ScrollBar is made of lots of nasty different control parts, (Part_XXX elements). Incidentally, I wrote an article about Part_XXX elements in a WPF article over at CodeProject right here if you are interested.Anyways, to cut a long story short, I decided to try and have a go at Styling a bigger control such as ScrollViewer. And guess what I managed to do it. Hooray!This is what it looks like: My Styled ScrollViewer Original ScrollViewer This blog entry outlines the steps I went through.Step 1Look up and copy the original ScrollViewer and ScrollBar Templates from MSDN, for example: I pasted that code from MSDN into a Resources file in a WPF window.Step 2I examined the control parts required for the full ScrollViewer/Scrollbar controls. This was fairly ok actually as the MSDN default Styles and pretty easy to follow.From looking at the default styles, it became clear that I needed to look at the following Style/Templates if I wished to re-style a ScrollViewer, as all of these were used in the default Style for the ScrollViewer somewhere.Step 3I then decided which parts I want to swap out. I chose to swap out and proceeded to hack the default Style/Templates to achieve the look I was after.Anyway, the results ScrollViewer looks like the following image: RepeatButton Thumb ScrollBar ScrollViewer When you consider the following image, you can see why these are the Style/Templates that need to be altered.So basically after that, it's just a question of cutting code. So without further ado, here is the code:Window xmlns=" xmlns:x=" xmlns:mc=" x:Class="ScrollViewerTemplate.Window1″ x:Name="Window" Title="Window1″ Width="200″ Height="200″>

The web page UI design with custom scrollbar adds an extra value to your website. Custom scrollbars make the website feel and look different. The browser’s scrollbar can be customized using CSS. Using CSS pseudo-element, you can easily change the default scrollbar style with your custom style. In this tutorial, we will show how you can make custom scrollbar and customize the look of the browser’s scrollbar with Webkit (pseudo element).WebKit allows you to styling scrollbars with your custom CSS. If scrollbar pseudo-element is defined, WebKit turns off the built-in scrollbar style and use the style provided in CSS under ::-webkit-scrollbar element.Here we’ll provide short CSS code snippet to change the default scrollbar style and create a custom scrollbar with WebKit. We’ll use only 3 pseudo-element, webkit-scrollbar, webkit-scrollbar-track, and webkit-scrollbar-thumb in WebKit. Use the following CSS in your web page to make custom scrollbars.Custom Scrollbar Style 1:::-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);}Custom Scrollbar Style 2:::-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);}Custom Scrollbar Style 3:::-webkit-scrollbar{ width: 12px; background-color: #F5F5F5;}::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ background-color: #F90; background-image: -webkit-linear-gradient(90deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,transparent 75%,transparent)}Custom Scrollbar in DivYou can create custom scrollbar for div content with Webkit. The element class or id need to be specified in webkit-scrollbar, webkit-scrollbar-track, and webkit-scrollbar-thumb. The following code snippets makes custom scrollbar for a specific div using CSS.HTML Code:div class="content"> div>CSS Code:.content::-webkit-scrollbar { width: 12px;}.content::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px;}.content::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}Scrollbar Selectors (Pseudo Elements)The following pseudo elements are available for customizing the browser’s scrollbar.::-webkit-scrollbar – Select the scrollbar.::-webkit-scrollbar-button – Select the buttons on the scrollbar.::-webkit-scrollbar-thumb – Select the draggable scrolling handle.::-webkit-scrollbar-track – Select the progress bar of the scrollbar.::-webkit-scrollbar-track-piece – Select the progress bar without handle.::-webkit-scrollbar-corner – Select the bottom corner of the scrollbar.::-webkit-resizer – Select the draggable resizing handle.ConclusionIn our example code snippet, only some basic styles are provided for the custom scrollbar. You can change the custom scrollbars style based on your web page UI. To customize the scrollbar, specify the CSS with ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb pseudo elements. CSSScrollbarWebkit Do you want to get implementation help, or enhance

Creative Flash Scroller 1.5.5 License : Demo Release : Now with Action Script 3.0, new interface and improved documentation Price : $29.98 US Language : English File Size : 21.444 MB Share | Click to enlarge image Description : With Creative Flash Scroller you can scroll any kind of Flash Content: static text, dynamic text, pictures, animations, movies. It comes with multiple scroll behaviors: touch scroll, mouse gesture scroll, scrollbar scroll and even supports mouse wheel behavior. You can add smooth scrolling or motion blur effects and customize it to suit your design, from an easy to use interface.Creative Flash Scroller main featuresCreative Flash Scroller requires almost no ActionScript knowledge and is made up of three components: Creative Classic Scroller (classic scroller with adjacent scrollbars), Creative Scroll Area (scroll area with no scrollbars), and Creative Scrollbar (for when you want to place the scrollbar in a custom position). * Auto Mask & Transparency Mask * Automatic Adjustment to Movie Clip size * Custom Scroll Step * Custom Scrollbars Position * Horizontal & Vertical Scrollbars * Enable/Disable Scrollbars * Mouse Gesture Scroll * Motion Blur Effect (on/off) * Smooth Scrolling Effect (on/off) * Touch Scroll * Works with static & dynamic text * Contextual Help * Easy skinning & styling * Easy & Intuitive user interface * Full Action Script 2.0 Control * Full Action Script 3.0 ControlMore information from program website Operating System : WinXP,WinVista,WinVista x64,Win7 x32,Win7 x64,Mac OS X,Mac Other,Windows Vista Ultimate,Windows Vista Ultimate x64,Windows Vista Starter,Windows Vista Home Basic,Windows Vista Home Premium,Windows Vis System Requirements : Adobe Flash CS3, Adobe Flash CS4, Action Script 2.0, Action Script 3.0 Order URL : Download URL 1 : Report this Checkout these similar programs :

Not every page on my blog, but this particular page has a custom scrollbar. Look at the scrollbar carefully. Yes, its different from a default scrollbar. Its a custom designed scrollbar. I'll show you how to create a cool responsive custom scrollbar using pure CSS. Scrollbars are very common. You will see it in a web page, in elements like or etc. If you want to add a scrollbar to an element like a , you’ll have to use the CSS overflow property. Scrollbars can be vertical (Y-axis) or horizontal (X-axis). Implementing a custom scrollbar to elements is the same. In this example, I’ll create vertical custom scrollbar on a , which is just 5px wide. .scroll { overflow-y: scroll; height: 130px; width: 300px; background-color: #fff; margin: 0 0 10px 0; } .scroll::-webkit-scrollbar { width:5px; } .scroll::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3); border-radius:5px; } .scroll::-webkit-scrollbar-thumb { border-radius:5px; -webkit-box-shadow: inset 0 0 6px red; } We often use the !important property in CSS to ignore rules or styles applied to an element and instead apply rules that has !important property. You can further override the !important rules using ... Try it Now, let me explain all the CSS pseudo-elements that I have used inside the tag. The ::-webkit-scrollbar is used to style an element’s scrollbar.• ::-webkit-scrollbar – Here I have specified the width of scroll bar, which is 5px. You can change the pixel according to your choice. • ::-webkit-scrollbar-track – In here I have assigned some values for the track. The track is where the scroll bar moves up and down. You can change the rgba() value to, let’s say, green and see how it looks. For example, rgba(255,10,0,0.5) Note: The rgba() function defines colours using red, blue, green and alpha. The alpha specifies opacity. • ::-webkit-scrollbar-thumb – Here