带有滚动条的固定位置的书签插件

Question

这是我的代码

http://jsfiddle.net/qhoc/KUYeJ/3/

这是我想要做的（要求）：

• .left 已知固定宽度为 100px
• .right 必须是 position:fixed，因为无论left 内容如何，​​我都希望它保持静止。它将有一堆使用 Wookmark 的 Pinterest 风格的图像 http://www.wookmark.com/jquery-plugin
• .right 需要使用一些滚动条插件独立滚动。 我尝试了以下所有方法，但均无效：没有滚动条。

http://www.baijs.nl/tinyscrollbar/

https://github.com/jamesflorentino/nanoScrollerJS

https://github.com/rochal/jQuery-slimScroll

我在想这是因为position:fixed 的使用导致它没有溢出滚动。但是我尝试在css中调整它，它仍然不显示滚动。

我被困在这一点上，想知道如何解决这个问题。以下是可以根据要求协商。

• 如果我必须在.right 中设置动态宽度，那没关系。我想我可以使用 jQuery 来检测窗口大小的变化。因为现在，它正在一路扩展为right:0
• 如果.left 和.right 都必须使用人工滚动条，那也没关系。虽然理想情况下.left 具有浏览器默认滚动条（就像今天的 Facebook：想象一下 .left 是 Facebook 订阅源，.right 是聊天面板）
• 如果我需要添加更多的父元素，我也可以。

非常感谢您的帮助！

Answer 1

我最终使用了 slimScroll，但诀窍是更改 html 结构以及应用插件的位置。

这是结构：

.scrollable
  .photo-thumbs
    %ul
      %li

插件的使用方法如下：

$('.scrollable').slimScroll();
$('.photo-thumbs ul li').wookmark();