Scrollbar styling

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

Height of a vertical scrollbar arrow. I chose the term "length" because you can take the length to mean the length of the actual arrow, in the direction it points. nWidth refers to the height of a horizontal scrollbar arrow, or the width of a vertical scrollbar arrow. This parameter is probably the one most people think of when they think of scrollbar "size", because it alters not only the width of the arrow, but the scrollbar margin and the thumb width as well.By specifying a non-negative integer number, you can specify the size, in pixels, of a scrollbar arrow. The scrollbar size will remain unaffected by the system scrollbar settings, even if the user changes these settings whilst your program is running.Important: By specifying a negative number, you can set the scrollbar dimensions to a multiple of the system scrollbar sizes. A value of -1 or SYSTEM_METRIC results in scrollbars that are the exact same size as a normal scrollbar. A value of -2 results in scrollbars twice the size of a standard scrollbar, and so on. By using negative values, the cool scrollbars will always be sized according to the system scrollbar metrics. You do not have to call this function every time the user changes the scrollbar system metrics.You should try to assign the same number to both the length and the width. If you use different values, then your scrollbars will looked squashed in one dimension.Making Flat ScrollbarsThe Cool Scrollbar library supports Flat scrollbars, like the variety found in the common controls library. Unlike the Microsoft flat scrollbars, the cool scrollbars only support two types of flat scrollbars. These are standard flat-looking scrollbars, without "hot-tracking", and normal flat scrollbars, with "hot-tracking" enabled. Hot tracking is the feature that highlights a portion of a scrollbar when the mouse moves over it.The CoolSB_SetFlatMode API allows you to give a cool scrollbar enabled window flat scrollbars.BOOL CoolSB_SetFlatMode(HWND hwnd, int wBar, UINT nFlatMode); You must specify which scrollbar of a window will be displayed as a flat scrollbar, by using the wBar parameter. This can be SB_HORZ, SB_VERT, or SB_BOTH if you want both scrollbars to become flat looking. The nFlatMode parameter can be one of three values. CSBS_FLAT Normal looking flat scrollbars CSBS_HOTTRACKED Hot-tracked flat scrollbars CSBS_NORMAL Remove the flat look Inserting a Button Into a Cool Scroll BarThere are four functions available to insert a button into a scrollbar. You can insert buttons to the left or right of a horizontal scrollbar, and above or below a vertical scrollbar.All of these functions use the SCROLLBUT structure to specify the attributes of each button. You must use the fMask member to specify which members of the SCROLLBUT structure contain valid information.BOOL CoolSB_InsertButton(HWND hwnd, int wSBflags, UINT nPos, SCROLLBUT *psb); wSBflags must be either SB_HORZ or SB_VERT nPos is an integer value specifying the position of the inserted button. This can be zero to insert the button in front of all other buttons, or -1 to insert the button after