我想知道Facebook用于其特殊滚动条的jQuery插件是什么,比如左边的两个,而不是右边的普通滚动条:



通常来说,当我想知道jQuery插件[网站X]用于[行为Y]时应该怎么走?

评论

我知道有人在SO上问过这个问题,但答案并未提供对JavaScript进行反向工程的基本思路。

#1 楼

Firefox和Chrome都有有用的调试工具,可帮助您找到有关行为脚本的更多信息。我将主要在Chrome中进行解释,因为它们的默认调试工具更加广泛。

首先,您通常可以使用Right Click->Inspect Element快速查找有关元素的信息。但是,这似乎不适用于Facebook的股票行情-这样做会选择滚动条后面的“股票行情新闻”,如下所示:



,因为我们看不到元素修改后,我们将不得不做出一些猜测。股票行情故事本身似乎与滚动条没有任何关系。转到父级并折叠<div class="tickerActivityStories">之后,我们可以开始清楚地看到事物

通过将鼠标悬停在上面(并调用滚动条的“出现”代码),我们可以观察页面的DOM并记下差异。 br />


因此,每当鼠标进入/离开时,<div class="uiScrollableAreaTrack">都会相应响应。该名称也很有意义(暗示它是滚动条的轨道)。通过展开该div,我们会注意到滚动条甚至还有一个“抓爪”!在<div class="uiScrollableAreaGripper"上,在右窗格中,展开Event Listeners选项卡。我们可以假设它响应焦点,并且在Focus部分下,您会注意到对Javascript文件的一些引用。将鼠标悬停在文件名上,Chrome会向您显示Javascript文件的链接。



如果运气好的话,这些文件可能具有可识别的名称(例如typeahead.min.js或类似名称,您可以在Google上搜索)。不幸的是,在大多数情况下,包括我们在内,我们很可能在寻找专有代码或精简代码。 (最小化的代码在减小文件大小以使页面加载更快方面极为普遍)

#2 楼

您可以在浏览器中使用探查器和调试工具来检查网站。 Webkit浏览器(例如Google Chrome)具有内置功能。Firefox有一个名为firebug的好插件。 。然后,使用调试器,您可以在javascript代码中设置断点以缩小确切位置

#3 楼

我使用了非常相似且易于使用的https://noraesae.github.io/perfect-scrollbar/