HTML/CSS How do I get 2 completely independant scrollbars?


Tags: html,css

Problem :

So I've coded something like this: http://jsfiddle.net/6ck393z8/ (It's a simplified version of a design that I'm preparing for a website)

HTML:

<table class="questionsTable">
    <col width="100" />
    <tr>
        <td class="questionsList" rowspan="1">
            <div id="scroll">
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
            </div>
        </td>
        <td height="auto">
            <div id="image"></div>
        </td>
    </tr>
</table>

CSS:

#thingy {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 10px;
}

#image {
    width: 100px;
    height: 800px;
    background-color: blue;
}

.questionsTable {
    width: 100%;
    height: 100%;
}

#scroll {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
}

The left side is a menu with various buttons that modify the content on the right, but here's the problem: Not all buttons on the left can be reached when the image is big, which is the case now. In those moments I need to scroll the right scroll bar down, otherwise not all elements on the left can be reached. I would obviously want both areas to be independent from one another, you only scroll on the right to control the image, and you only scroll on the left to control the menu.

How could I do that?



Solution :

Try the following code

<body>
    <!-- Main container to hold all sections and each section will have their own scrollbars -->
    <div>
        <!-- Left section with same height -->
        <div style="height:300px; overflow:auto;float:left; width:45%;">
            <div id="scroll">
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
            </div>
        </div>
        <!-- Right section with same height -->
        <div style="height:300px; overflow:auto;float:right; width:45%">
            <div id="image"></div>
        </div>
    </div>
</body>

    CSS Howto..

    css float: left clash/collision, how to avoid?

    How to resize CSS Box with increase in content

    How to switch tabs and change css class on click using Angular2?

    Jquery Toggle Button image and Div Show/Hide

    How do you make a filter for images that have tags?

    Html, table, img & css - how to get text to wrap correctly?

    HTML + CSS dropdown menu: how to add a button between each first-level link without breaking the alignment?

    How to assign a class or ID to a table within a JavaScript function?

    Push vertically resizable Div to bottom of wrapper. How?

    How to prevent exceeding the parent's boundary?

    how to code different type of border in css?

    How to Edit the CSS File of the Installed Plugin in Wordpress

    How to code CSS for all browsers in jQuery.css() method?

    how to use liveview in dreamweaver cs5 and local xampp server

    creating a slide show for home page in my web site [closed]

    How to make image 3D using CSS

    How to make this styling with css

    Css - how hide third element td?

    How do I selectively stack columns with twitter bootstrap

    how to apply css to a specific element of a table?

    CSS check box, how to make an item unchecked only if another one is checked

    CSS - How to remove comments and make CSS one line

    How to add tabs or spaces to a textline with CSS?

    How do I make two arrows in css

    How to make a simple pure css or jquery image toggle?

    How to fix clipped text over 3D transform image on Safari?

    Getting an class to show when item is clicked

    How to create dropdown with multiple columns?

    How can I style a disabled button in a Windows 8 JavaScript app?

    CSS: How can I hide a class which has no other class or ID?