Scrolling of inner div element is controlled by the outer scrollbar

Question

Scrolling of inner div element is controlled by the outer scrollbar

I have a div element that can scroll vertically, but I want the scrollbar to be positioned outside of the div just like in a regular webpage. The scrollbar should only affect this particular div and not the entire page.

<div id="outer">
    <div id="inner"> //content that will be scrolled
        <!-- content -->
    </div>
</div>

For reference, you can check out an example Fiddle: http://jsfiddle.net/7pgyt/

The desired layout would include the scrollbar on the far right side within the red area, allowing scrolling for the blue area only. Is it possible to achieve this using just HTML and CSS?

A potential result could look something like the following:

html css scroll

Answer 1

Answer №1

Provided is the following HTML structure:

<div id="wrapper">
    <div id="top" class="bar"></div>
    <div id="outer">
        <div id="inner"></div>
    </div>
    <div id="bottom" class="bar"></div>
</div>

The styles that can be used are as follows:

#wrapper {
    position:relative;
    height:200px;
}

#outer {
    background-color: red;
    overflow-y:auto;
    height: 200px;
}

#inner {
    color: white;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    background-color: blue;
    margin:50px;
    position:relative; z-index:1;
}

.bar {
    height:50px; 
    z-index:2;
    position:absolute; 
    background:red; 
    left:0; 
    right:20px;
}

#bottom {bottom:0;}
#top {top:0; }

Example

An Alternative Example using pseudo selectors instead of the bar divs

Answer 2

Provided is the following HTML structure:

<div id="wrapper">
    <div id="top" class="bar"></div>
    <div id="outer">
        <div id="inner"></div>
    </div>
    <div id="bottom" class="bar"></div>
</div>

The styles that can be used are as follows:

#wrapper {
    position:relative;
    height:200px;
}

#outer {
    background-color: red;
    overflow-y:auto;
    height: 200px;
}

#inner {
    color: white;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    background-color: blue;
    margin:50px;
    position:relative; z-index:1;
}

.bar {
    height:50px; 
    z-index:2;
    position:absolute; 
    background:red; 
    left:0; 
    right:20px;
}

#bottom {bottom:0;}
#top {top:0; }

Example

An Alternative Example using pseudo selectors instead of the bar divs

Answer 3

Answer №2

Here is a solution that you can try:

Check out the Demo

HTML code snippet:

<body>
    <div id="outer"></div>
    <div id="inner">..content...</div>
</body>

CSS Code snippet:

body {
    position:relative;
    width:100%;
    margin:0;
    padding:0;
}
div {
    box-sizing:border-box;
}
#outer {
    border:50px solid red;
    padding: 50px;
    position:absolute;
    height:200px;
    right:17px;
    left:0;
}
#inner {
    color: white;
    font-weight: bold;
    height: 200px;
    padding:50px;
    margin-left: auto;
    margin-right: auto;
    overflow-y: scroll;
    background-color: blue;
}

Answer 4

Here is a solution that you can try:

Check out the Demo

HTML code snippet:

<body>
    <div id="outer"></div>
    <div id="inner">..content...</div>
</body>

CSS Code snippet:

body {
    position:relative;
    width:100%;
    margin:0;
    padding:0;
}
div {
    box-sizing:border-box;
}
#outer {
    border:50px solid red;
    padding: 50px;
    position:absolute;
    height:200px;
    right:17px;
    left:0;
}
#inner {
    color: white;
    font-weight: bold;
    height: 200px;
    padding:50px;
    margin-left: auto;
    margin-right: auto;
    overflow-y: scroll;
    background-color: blue;
}

Scrolling of inner div element is controlled by the outer scrollbar

Answer №1

Answer №2

Check out the Demo

Similar questions

Having trouble with the CSS `not` selector?

Browsing through the last items on a webpage

When implementing CSS, the background image in the header section of my webpage is not visible to me

Creating a Custom HTML Template Message for Emails in Codeigniter

What is the most effective way to reduce the spacing between columns in Bootstrap while maintaining consistent spacing on the outer edges?

Unable to insert menu links into the container

The site cache appears to be deactivated, but the source of the deactivation remains unclear. Can you help identify the issue?

Positioning elements within a Bootstrap column: Fixed versus Absolute positioning

Creating a circular image with a vibrant color light effect that seamlessly runs across all browsers: What you need to know

Guide for manually initiating the mouseleave event on a smartphone or tablet

Identifying and handling the removal of a complete div element by the user

Do remote resource links remain accessible when there is no connection to the internet?

Navigate Behind Slider on Scrolling

Text that changes within a set-sized box

Conceal the toolbar element if it is not at the top of the page

Explore three stylish ways to showcase dynamic JavaScript content using CSS

"Struggling to make the 'overflow: hidden' property work for an absolutely positioned

Why are link elements that generate hyperlinks important?

What are the steps to create a hovering dropdown menu that changes the background window to transparent when hovered over?

Controling attributes during the design process