scrollbar – Page 4 – Tarik Billa

use transition on ::-webkit-scrollbar?

July 25, 2023 by Tarik

It is fairly easy to achieve using Mari M’s background-color: inherit; technique in addition with -webkit-background-clip: text;. Live demo; https://jsfiddle.net/s10f04du/ @media screen and (-webkit-min-device-pixel-ratio:0) { .container { overflow-y: scroll; overflow-x: hidden; background-color: rgba(0,0,0,0); -webkit-background-clip: text; transition: background-color .8s; } .container:hover { background-color: rgba(0,0,0,0.18); } .container::-webkit-scrollbar-thumb { background-color: inherit; } }

How to create a custom scrollbar on a div (Facebook style)

July 25, 2023 by Tarik

This link should get you started. Long story short, a div that has been styled to look like a scrollbar is used to catch click-and-drag events. Wired up to these events are methods that scroll the contents of another div which is set to an arbitrary height and typically has a css rule of overflow:scroll … Read more

Cannot use geometry manager pack inside

July 24, 2023 by Tarik

Per the docs, don’t mix pack and grid in the same master window: Warning: Never mix grid and pack in the same master window. Tkinter will happily spend the rest of your lifetime trying to negotiate a solution that both managers are happy with. Instead of waiting, kill the application, and take another look at … Read more

Style the scrollbar with css in Google Chrome (-webkit)

June 6, 2023 by Tarik

Here is an example that works: ::-webkit-scrollbar { height: 12px; width: 12px; background: #000; } ::-webkit-scrollbar-thumb { background: #393812; -webkit-border-radius: 1ex; -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75); } ::-webkit-scrollbar-corner { background: #000; } Or you can use jScrollPane.

How to increase scrollbar width in WPF ScrollViewer?

June 4, 2023 by Tarik

The ScrollBar template reaches out for system parameters to determine its width/height (depending on orientation). Therefore, you can override those parameters: <ScrollViewer> <ScrollViewer.Resources> <sys:Double x:Key=”{x:Static SystemParameters.VerticalScrollBarWidthKey}”>100</sys:Double> </ScrollViewer.Resources> </ScrollViewer>

hide scrollbar and show on hover like facebook’s new chat sidebar [closed]

May 30, 2023 by Tarik

Here is an update to Stephen P.’s post to have a styled scroll bar. http://jsfiddle.net/PVZB8/139/ -Mike

How to make the horizontal scrollbar visible in DT::datatable

May 26, 2023 by Tarik

How do I add a margin to a CSS webkit scrollbar? [closed]

May 20, 2023 by Tarik

There’s yet another solution which might fit easily in everybody’s project. If you use a transparent border as a margin and a box-shadow with inset to set it’s color, you’d get the result you are hoping for. For instance: ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { box-shadow: inset 0 0 10px 10px green; border: solid … Read more

Hidden scrollbars in Firefox (allows scrolling but just no scrollbar)

May 18, 2023 by Tarik

You must wrap your scrollable div in another div with overflow:hidden that hides the scrollbar. See http://jsfiddle.net/qqPcb/ for an example. BTW: The same technique is used by a nice little jQuery plugin called jScrollPane

Apple Style Scrollbar WPF

May 18, 2023 by Tarik

It’s not very pretty and in all honesty I can’t remember where it came from, there is something similar to what you’re after in one of my project here, there is probably a lot in the style that’s not required or is incorrect but may as well give it a shot. <!–Scrollbar Thumbs–> <Style x:Key=”ScrollThumbs” … Read more