在身体保持定位时水平滚动固定 div答案

【问题标题】：Scroll fixed div horizontaly while body stays positioned在身体保持定位时水平滚动固定 div
【发布时间】：2015-06-30 15:42:16
【问题描述】：

我正在尝试创建一个具有聊天侧边栏的社交网站，就像 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>

【问题讨论】：

能否提供代码或示例？
@user3272243 添加了 html 示例，是否也需要 css ？
一切都有助于发现你“做错了什么”。
看看这个小提琴：Fiddle这正是我的问题，尝试上下滚动蓝色或绿色框，你就会明白我的意思。我当然不认为我做错了什么，应该是我缺少的 css 或者这是一个通用的浏览器，然后我需要使用 javascript 来克服它。
哦！我明白你现在的意思了......让我看看我是否能找到解决方案。

标签： javascript jquery html css

【解决方案1】：

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

更新：每当鼠标在光标上方滚动时，请手动更新 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>

【讨论】：

非常感谢，这很好用，但有没有纯 css 方法可以做到这一点？ @Bishal
@JohnSnow 欢迎您...不，您必须使用 javascript (jquery) 覆盖