0

Mouse peripheral causes the styling of the scrollbar to change. How do I prevent this from happening or change the background color of the scrollbar box so that it matches the rest of my site?

This is the desired effect when I have scrollable content:

Without Mouse Plugged In

enter image description here

This is the undesired effect when I have scrollable content with a mouse plugged in:

With Mouse Plugged In

enter image description here

Here is a link to code that models the scrollable portion in question:

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow

I'm experiencing this issue my Macbook Pro (I haven't done any testing on a Windows device.) I'm looking for a solution that works in Safari, Firefox and Chrome.

Gerald Schneider
  • 16,520
  • 9
  • 55
  • 76
Stefan Agapie
  • 1
  • 1
  • Link to code that models the scrollable portion in question: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow – Stefan Agapie Feb 29 '16 at 13:00
  • Generally you don't style system elements like scroll bars. They are different across systems and OS's. What about Ipads which don't have any scroll bar at all? I would be more concerned about my content and page styling than scroll bar aesthetics. so long as your styling is dynamic and can re-size should a scroll bar appear next to it instead of on top you'll be fine. However this answer provides other options: http://stackoverflow.com/questions/7725652/css-scrollbar-style-cross-browser Its not standard so they all allow you to do it differently. – ste2425 Feb 29 '16 at 15:50
  • @ste2425 Generally speaking, I don't want to style the scrollbar but instead choose which default style is being applied. – Stefan Agapie Feb 29 '16 at 23:34
  • The default style is the style the browser or operating system gives. Its not a user selectable setting. i suspect your system is going from desktop to mobile mode when the mouse is removed. – ste2425 Mar 01 '16 at 09:02
  • Update: This effect/issue does not present itself with an Apple Magic Mouse; only when I use a third party mouse. Since I can't ask our users to use Apple products only this revelation does not help. – Stefan Agapie Mar 01 '16 at 17:45

0 Answers0