我想知道 Facebook 为他们的特殊滚动条使用了哪些 jQuery 插件,比如左边的两个,而不是右边的普通插件:
(来源)
一般来说,当我想知道jQuery插件[网站X]用于[行为Y]时应该怎么做?
我想知道 Facebook 为他们的特殊滚动条使用了哪些 jQuery 插件,比如左边的两个,而不是右边的普通插件:
(来源)
一般来说,当我想知道jQuery插件[网站X]用于[行为Y]时应该怎么做?
Firefox 和 Chrome 都有有用的调试工具来帮助您找到有关与行为相关的脚本的更多信息。我将主要在 Chrome 中进行解释,因为它们的默认调试工具更广泛
作为开始,您通常可以使用Right Click->Inspect Element
快速查找有关元素的信息。但是,这似乎不适用于 Facebook 的股票代码 - 这样做将选择滚动条后面的“股票代码新闻”,如下所示:
因为我们看不到正在修改的元素,所以我们将不得不进行一些猜测。股票代码故事本身似乎与滚动条没有任何关系。走到父母面前折叠起来后<div class="tickerActivityStories">
,我们就可以开始看清事物了
通过悬停(并调用滚动条的“出现”代码),我们可以观察页面的 DOM 并注意差异。
因此,<div class="uiScrollableAreaTrack">
只要鼠标进入/离开,它就会做出相应的响应。这个名字也很有意义(暗示它是滚动条的轨道)。通过展开它div
,我们会注意到滚动条甚至还有一个“抓手”!
要找出与滚动条有关的 Javascript,请单击<div class="uiScrollableAreaGripper"
,然后在右侧窗格中展开Event Listeners
选项卡。我们可以假设它响应焦点,并且在该Focus
部分下,您会注意到一些对 Javascript 文件的引用。将鼠标悬停在文件名上,Chrome 会向您显示 Javascript 文件的链接。
如果幸运的话,这些文件可能有一个可识别的名称(例如typeahead.min.js
或类似名称,您可以在 google 上搜索)。不幸的是,在大多数情况下,包括我们的,我们可能正在查看专有代码或缩小代码。(压缩代码非常常见,用于减小文件大小,以便更快地加载页面)
您可以在浏览器中使用分析器和调试工具来检查网站。Webkit 浏览器(如 Google 铬)内置了这些。Firefox 有一个很好的插件,叫做 firebug。
使用分析器,您可以查看哪些函数被调用的频率,这可以让您知道在哪里查看。然后使用调试器,您可以在 javascript 代码中设置断点以缩小确切位置
我使用了非常相似且易于使用的https://noraesae.github.io/perfect-scrollbar/