Scroll bar styling
Is anyone using any JavaScript plugin that allows CSS styling of scroll bars in browsers? Hopefully it works across different browsers :-) We are primarily looking at changing the colors.
Tagged:
2
Answers
-
Here's a jQuery plugin:
http://jscrollpane.kelvinluck.com/1 -
There are a couple of options - 1. You can use firebug to play with css in runtime. Chrome developer tools also provides with such facility. 2. There are a few plugins available for firefox the we can use sometimes to look at the existing css styles, but we cannot edit the css styles using this plugin -
https://addons.mozilla.org/en-us/firefox/addon/css-viewer/ [1]:
http://techoverflow.int.thomsonreuters.com/upfiles/Firebug1.jpg [2]:
http://techoverflow.int.thomsonreuters.com/upfiles/Firebug2_1.jpg0 -
There is some great information found here: [
http://stackoverflow.com/a/14150577/276648][1] A key note to that post is this statement: > "Currently, there exists no > cross-browser scroll bar CSS styling > definitions." With that in bind, one would most likely use JavaScript to do it. There are a few issues that arise when manipulating the scroll bars with JavaScript that need to be considered though. The way most (if not all) of the 3rd party plugins work is that they hide the current scroll bars and position a DIV over that area and then delegate the scrolling events. With that in mind, the considerations are: 1. How do you react to the area being resized? **Answer**: `$(window).on('resize', myjs.myFunction);` **Just don't forget to unbind that event to! ** `$(window).unbind('resize', myjs.myFunction);` 2. When the area is removed from the DOM and re-rendered, how do you re-initialize the plugin to apply the scroll bars again. **Answer**: "...results may vary" Now in a perfect world your HTML and CSS is 100% consistent across all pages. Then you know exactly what class or element has the scroll area and you can easily do the magic. However, in the *Real World*, you have to figure out what area will contain the scroll areas and decorate "those" to make it work. In the end, anything is possible. But, how much time and energy should be spent fixing the bugs that "WILL" come. :-) [1]:
http://stackoverflow.com/a/14150577/2766480 -
Have you been using it?0
-
I've played around with it, but I haven't used it for a project.0
-
This is pretty much the only one that's actively maintained in any scenario - there's another you can mess with (
https://github.com/akmjenkins/jquery-scroll) but.. yeah.0 -
There are actually quite a few active projects. tinyscrollbar, nicescroll, slimscroll, nanoscroller, jquery.perfect-scrollbar, jsscrollpane. And as most of these are on github, many have quite a few forks.0
-
I have used this jquey custom scrollbar
https://github.com/malihu/malihu-custom-scrollbar-plugin ([see demo here][1]) for Eikon Administration project. it's responsive, worked well on touch screen, cross-browsers compatible, tried and tested and already go live for our production. ![alt text][2] [1]:
http://manos.malihu.gr/tuts/custom-scrollbar-plugin/complete_examples.html "see demo here" [2]:
http://techoverflow.int.thomsonreuters.com/upfiles/capture-20140516-140856.png2 -
We were already playing with jsscrollpane and ran into trouble. So we are looking for something that is in regular use within TR.0
-
Thanks, we will take a look at this. Were you able to use it as is, or did you have to take care of some quirks?0
Categories
- All Categories
- 6 AHS
- 39 Alpha
- 161 App Studio
- 4 Block Chain
- 4 Bot Platform
- 16 Connected Risk APIs
- 47 Data Fusion
- 30 Data Model Discovery
- 608 Datastream
- 1.3K DSS
- 577 Eikon COM
- 4.9K Eikon Data APIs
- 7 Electronic Trading
- Generic FIX
- 7 Local Bank Node API
- Trading API
- 2.7K Elektron
- 1.3K EMA
- 236 ETA
- 519 WebSocket API
- 33 FX Venues
- 10 FX Market Data
- 1 FX Post Trade
- 1 FX Trading - Matching
- 12 FX Trading – RFQ Maker
- 5 Intelligent Tagging
- 2 Legal One
- 20 Messenger Bot
- 2 Messenger Side by Side
- 9 ONESOURCE
- 7 Indirect Tax
- 59 Open Calais
- 264 Open PermID
- 39 Entity Search
- 2 Org ID
- PAM
- PAM - Logging
- 8.4K Private Comments
- 6 Product Insight
- Project Tracking
- ProView
- ProView Internal
- 20 RDMS
- 1.4K Refinitiv Data Platform
- 367 Refinitiv Data Platform Libraries
- 3 Refinitiv Due Diligence
- LSEG Due Diligence Portal API
- 3 Refinitiv Due Dilligence Centre
- Rose's Space
- 1.1K Screening
- 18 Qual-ID API
- 13 Screening Deployed
- 23 Screening Online
- 10 World-Check Customer Risk Screener
- 990 World-Check One
- 44 World-Check One Zero Footprint
- 45 Side by Side Integration API
- Test Space
- 3 Thomson One Smart
- 1.2K TR Internal
- Global Hackathon 2015
- 2 Specialists Who Code
- 10 TR Knowledge Graph
- 150 Transactions
- 142 REDI API
- 1.7K TREP APIs
- 4 CAT
- 21 DACS Station
- 117 Open DACS
- 1.1K RFA
- 103 UPA
- 172 TREP Infrastructure
- 224 TRKD
- 886 TRTH
- 5 Velocity Analytics
- 5 Wealth Management Web Services
- 60 Workspace SDK
- 9 Element Framework
- 5 Grid
- 13 World-Check Data File
- Yield Book Analytics
- 46 中文论坛