CODEWITHSUNDEEP
javascriptjqueryhtmlcss
John Snow
John Snow

Reputation: 31

Scroll fixed div horizontaly while body stays positioned

Im trying to create a social website which has a chat sidebar, which is just like Facebook. It has a timeline with posts in one section and a chat sidebar.

I have made the chat <div> to be fixed just like Facebook chat.

Now when the total height of elements within the chat sidebar becomes more than the page height, scrollbar appears. When i scroll through it and reach the end of it, if i scroll more, now it scrolls the posts on the timeline.

So what i want to achieve is, to make chat sidebar scroll irrelative to the timeline. to make this crystal clear, i want them to scroll separately, so if i scroll chats and it reaches the bottom, if my pointer is still on the chat sidebar and i scroll nothing should happen.

I prefer to find a way without the use of jQuery. but if its not achievable with css, i would appreciate any help on javascript as well.

Great Example: Facebook

Sample from my 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>

Upvotes: 2

Views: 215

Answers (1)

bytestorm
bytestorm

Reputation: 1541

Put your timeline in the timeline div and chatbar inside chatbar div. Note in the javascript I have overridden the natural behaviour of scrolling. So, when your mouse is over chatbar normal scrolling wouldn't occur.

Update: Whenever the mouse is scrolled while the cursor is over the div manually update the scrolltop property.

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>

Upvotes: 1

Related Questions