Как сделать изменяемую по размеру, прокручиваемую боковую панель, такую ​​как «Чат/Событие» в Facebook?

Question

Я пытаюсь создать сводную/скрытую боковую панель для моего веб-приложения, тщетно в чате чата/события Facebook. Он должен иметь два отдельных раздела, разделенных по вертикали и оба независимо прокручиваемые.

Я попытался реализовать это, используя плагин Snap.js от jakiestfu. https://github.com/jakiestfu/Snap.js/

Хотя это прекрасно работает, она перемещает содержимое на моей странице из поля зрения, и ломает мои position: fixed элементы заголовка из-за CSS transform: tranlate3d().

Поскольку никаких проблем с CSS не существует, я задавался вопросом, знает ли кто-нибудь о решении имитировать функциональные возможности боковой панели Ticket 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>