Question

我正在尝试创建一个具有聊天侧边栏的社交网站，就像Facebook一样。它有一个时间表，其中包含一个部分的帖子和一个聊天边栏。

我让聊天<div>就像Facebook聊天一样。

现在，当聊天侧边栏中的元素总高度超过页面高度时，会出现滚动条。当我滚动它并到达它的结尾时，如果我滚动更多，现在它滚动时间轴上的帖子。

所以我想要实现的是，使聊天侧边栏滚动与时间轴无关。为了使这个水晶清晰，我想让它们分开滚动，所以如果我滚动聊天并且它到达底部，如果我的指针仍然在聊天边栏上，我滚动什么都不会发生。

我更喜欢在不使用jQuery的情况下找到一种方法。但如果用css无法实现，我也会对javascript的任何帮助表示感谢。

很好的例子：Facebook

来自我的HTML
的示例

<div class="outer-container">
    <div class="timeline">

        <div class="contents">
            <div class="header"><p>Timeline</p></div>

            <div class="post-items">
                <div class="post">
                    <div class="avatar">
                        <div class="frame"><img src="blabla.img" /></div>
                    </div>
                    <div class="post-block">
                        <div class="post-header"><p>Some Header</p></div>
                        <div class="post-contents"><p>Some contents</p></div>
                        <div class="post-footer"><p>Some footer</p></div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="sidebar right-sidebar">
        <div class="chat-list">

            <ul class="friends">
                <div class="header"><p>Friends</p></div>
                <li>
                    <a class="chat-item">
                    <div class="avatar">
                        <div class="frame"><img src="blabla.img" /></div>
                    </div>
                    <span class="name">James Hetfield</span>
                    <span class="ic ic-message"></span></a>
                </li>
            </ul>

        </div>
    </div>
</div>

Answer 1

将时间轴放在聊天栏div中的时间线div和聊天栏中。注意在javascript中我已经覆盖了滚动的自然行为。因此，当鼠标悬停在聊天栏上时，正常滚动就不会发生。

更新：当光标在div上方滚动鼠标时，手动更新scrolltop属性。

JSFiddle：Link

<html>
    <head>

        <style type="text/css">
            #body{
                width: 95%;
                margin: auto;
            }
            #timeline{
                width: 75%;
                display: inline-block;
                overflow-y: scroll;
                margin: auto;
            }

            #chatbar{
                position: fixed;
                width: 15%;
                display: inline-block;
                max-height: 100%;
                margin: auto;
                overflow-y: scroll;

            }
        </style>
    </head>

    <body>
        <div id="body">
            <div id="timeline">

            </div>
            <div id="chatbar" class="scrollable">

            </div>
        </div>  
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $( '.scrollable' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {
                var e0 = e.originalEvent,
                    delta = e0.wheelDelta || -e0.detail;

                this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
                e.preventDefault();
            });
        </script>
    </body>
</html>

当身体保持定位时，滚动固定div水平

1 个答案: