javascript - 如何制作像 Facebook 的 "Chat/Event Ticker"那样可调整大小、可滚动的侧边栏？

Question

我正在尝试为我的 Web 应用程序设计一个可折叠/可隐藏的侧边栏，但 Facebook 的聊天/事件收录器是徒劳的。它需要有两个独立的部分，垂直分开，并且都可以独立滚动。

我尝试使用 jakiestfu 的 Snap.js 插件来实现这一点。 https://github.com/jakiestfu/Snap.js/

虽然效果很好，但由于 CSS transform: tranlate3d()，它会将我页面上的内容移出 View ，并破坏了我的 position: fixed 标题元素。

由于没有很好的解决这些 CSS 问题，我想知道是否有人知道模仿 Facebook Chat/Event Ticker 侧边栏功能的解决方案。

Answer 1

我使用 CSS3 调整固定侧边栏的大小(我的在左侧)并在侧边栏大小更改时调整主页的左边距来完成类似的操作。您可能会先在侧边栏上做类似的事情，然后以相同的方式将侧边栏一分为二。

var sizeme = 200,
    sizeItBro = function () {
      if ($("#sidebar").width() != sizeme) {
        sizeme = $("#sidebar").width() + 40;
        $("#main").css("margin-left", sizeme + "px").text(sizeme + " pixels of margin.");
      }
    };
window.setInterval(sizeItBro, 150);

* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
body {
  margin:0;
  padding:0;
}
#main {
  margin-left:200px;
  min-height:100%;
  padding:20px;
}
#sidebar {
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  background:#ffa;
  width:200px;
  min-width:100px;
  max-width:500px;
  resize:horizontal;
  overflow:auto;
  border-right:2px ridge #fe9;
  padding:20px;
}
#tophalf {
  background:#fe9;
  height:300px;
  min-height:100px;
  max-height:500px;
  resize:vertical;
  overflow:auto;
  border-bottom:2px ridge #fe9;
  margin:-20px -20px 20px;
  padding:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">Main Content</div>
<div id="sidebar">
    <div id="tophalf">Sidebar A</div>
    <p>Sidebar B</p>
</div>