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

Creating a Dojo HTML template involves incorporating repetitive sections of HTML code within the template structure

Generate random images and text using a script that pulls content from an array

Update the button functionality according to the button's unique identifier

Custom styles for PrimeNG data tables

What is the best way to modify the size of a canvas element while maintaining effectiveness?

Exploring the bond between siblings from a child's perspective

Bring to life a dashed slanted line

Is there a way to create a dynamic associative array using jquery?

Displaying HTML elements conditionally in React depending on boolean values

I'm looking for a solution to implement a vertical carousel in Google's Materialize CSS without the need for custom development

When an image is clicked, I would like it to redirect to a different page

The problem with floating labels

Is there a way to keep my <nav> positioned in the top right corner of my header?

The stacking order of a child element within a parent element, which has a transform

Looking to switch up the hide/show toggle animation?

Disable location prompt feature when using AngularJS with Maps API

Troubleshooting Problems with Owl Carousel Loading

Transforming Google Maps from using jQuery to AngularJS

Restrict the character count in the input field according to its width

Searching dynamically using class names with JQuery