7

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:

enter image description here

(source)

Generally, how should I go when I want to know what jQuery plugin [website X] uses for [behaviour Y]?

1
  • I know this has been asked on SO, but the answers do not provide basic ideas to reverse engineer javascript.
    – user187
    Mar 20, 2013 at 18:54

3 Answers 3

8

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:

inspect fail

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.

comparison

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!

gripper

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.

listeners

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)

2

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

0

I used https://noraesae.github.io/perfect-scrollbar/ that is very similar and easy to use

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.