I want to know what jQuery plugins Facebook uses for their special scrollbar, like the two on the left, not the normal one on the right:
(source)
Generally, how should I go when I want to know what jQuery plugin [website X] uses for [behaviour Y]?
3 Answers
Both Firefox and Chrome have useful debugging tools to help you find out more information about scripts relating to a behavior. I'll be explaining mostly in Chrome as their default debug tools are more extensive
As a start, you can usually use Right Click->Inspect Element to find out information about an element quickly. However this does not appear to work on Facebook's ticker - doing so will select the "Ticker News" behind the scrollbar like this:
Because we cannot see the element being modified, we will have to make some guesses. The ticker stories themselves do not appear to have anything related to the scrollbars. After traveling up to the parent and folding <div class="tickerActivityStories">, we can start to see things clearly
By hovering over (and invoking the scrollbars's "appear" code) we can observe the page's DOM and note the differences.
So it appears that <div class="uiScrollableAreaTrack"> as it responds accordingly whenever the mouse enters/leaves. The name also makes sense (implies that it's the scrollbar's tracks). By unfolding that div, we'll notice that there is even a "gripper" for the scrollbar!
To find out what Javascript is involved with the scrollbars, click on <div class="uiScrollableAreaGripper", and on the right pane, unfold the Event Listeners tab. We can assume that it responds to focus, and under the Focus section, you'll notice a few references to Javascript files. Hover over the filenames and Chrome will show you the link of the Javascript files.
If you're in luck, the files may have a recognizable name (such as typeahead.min.js or similar, which you can google). Unfortunately in most cases, including ours, we are likely looking at proprietary code or minified code. (Minified code is extremely common to reduce file sizes so that pages load faster)
You can use a profiler and debug tool in your browser to examine the website. Webkit browsers (like Google chromium) have those build in. Firefox has a good plugin called firebug.
With the profiler you can see which functions are called how often, which can give you an idea where to look. Then with the debugger you can set break points in the javascript code to narrow down the exact location
I used https://noraesae.github.io/perfect-scrollbar/ that is very similar and easy to use
