CODEWITHSUNDEEP
htmlcss
AZT
AZT

Reputation: 149

Horizontal Scrolling With two divs

What i want to do is to scroll my web page in two direction that is leftPanel in left to right direction while rightPanel in right to left direction but the header remain fixed in its postion. But i am stuck some where.

here is my code:

HTML File-

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My Page </title>
        <link rel='stylesheet' href='css/default.css'>
    </head>
    <body class='aboutUsBody'>
        <div id='header'></div>
        <div id='mainPanel'>
            <div id='leftPanel'></div>
            <div id='rightPanel'></div>
        </div>

    </body>
</html>

CSS File-

html{

    width: 100%;
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
    margin: 0px;
}
#header{
    width: 100%;
    height: 10%;
    background: #bad960;
}

#mainPanel{
    height: 90%;
    display: inline;
    overflow-y: scroll;
}
#leftPanel{
    float: left;
    margin-left: -200px;
    display: inline;
    position: relative;
    width:100 %;
    height: 100%;
    background: red;
}
#rightPanel{
    display: inline-block;
    position: relative;
    width:100%;
    height: 100%;
    background: black;
}

please look at the image for further explaination:

enter image description here

at the page load scroll will be at center and the two divs positioned accordingly, when i scroll up the leftPanel scrolls from left to right and when i scroll down its rightPanel move from right to left. What should i do ??

Upvotes: 1

Views: 1188

Answers (2)

AZT
AZT

Reputation: 149

I have done some research and i had achieved it by adding a little jquery.

My code is :

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My Page </title>
        <link rel='stylesheet' href='css/default.css'>
        <script src="./jQuery.1.10.0.js"></script>
        <script>
        $(document).ready(function(){
            $("#mainPanel").scrollLeft(document.body.clientWidth*0.25);
            $(window).bind('mousewheel DOMMouseScroll', function(event){
            if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {

            }
            else {

            }
});
        });
        </script>
    </head>
    <body class='aboutUsBody'>
        <div id='header'></div>
        <div id='mainPanel'>
            <div id='panelOne' class='panel'></div>
            <div id='panelTwo' class='panel'></div>
        </div>  
    </body>
</html>

CSS file

html{
    width: 100%;
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
    margin: 0px;
}
#header{
    width: 100%;
    height: 10%;
    background: #bad960;
    position: fixed;
}

#mainPanel{
    top:10%;
    position: relative;
    width:100%;
    height: 90%;
    overflow-x:scroll;
    display: block;
    background: yellow;

}
#panelOne{
    position: absolute;
    display: inline;
    width: 1000px;
    height: 100%;
    background: red;

}
#panelTwo{
    position: absolute;
    display: inline;
    margin-left: 1000px;
    width: 1000px;
    height: 100%;
    background: aqua;

}

and here its fiddle: JSFiddle

Upvotes: 1

Jacob
Jacob

Reputation: 164

What you are doing is quite awkward to achieve because the scrollable divs must have a known width otherwise it is really difficult to control the line-wrap to act in your favour, but if you have a fairly static design to aim for it can work quite well.

You have quite a few strange things in your code that don't seem to be doing anything useful but it could be due to me misunderstanding what you are aiming for, also, some javascript might be essential for this, at least to get the left panel to start scrolled all the way to the right.

Here is my working css for something like what you are trying to do:

html{

    width: 100%;
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
    margin: 0px;
}
#header{
    width: 100%;
    height: 10%;
    background: #bad960;
}

#mainPanel{
    height: 90%;
}
#leftPanel{
float: left;
    width:50%;
    height: 100%;
    background: red;
    overflow-x: auto;
}
#rightPanel{
    float: left;
    color: red;
    width:50%;
    height: 100%;
    background: black;
    overflow-x: auto;
}
.horizScroll{
    width: 800px;    
}
#leftPanel .horizScroll{
    direction: rtl;
}

And a jsfiddle

Upvotes: 1

Related Questions