Utilize the browser/page scroll bar to navigate through the fixed-position div's content

Question

Utilize the browser/page scroll bar to navigate through the fixed-position div's content

I have several div elements with the CSS property position:fixed positioned all over the page. One of these divs contains longer content than the others.

My goal is to enable scrolling within that specific box using the main browser/page scroll-bar, as opposed to the normal overflow:auto method demonstrated in this example: like this. The exact scenario can be viewed at

Is there any plugin available that can help achieve this functionality?

javascript jquery css html

Answer 1

Answer №1

If you are not familiar with HTML syntax:

<body>
    <section id="mainContent"></section>
    <header></header>
    <section id="leftPanel"></section>
    <section id="rightPanel"></section>
</body>

#mainContent {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    min-height: 100%;
    width: 100%;
    padding: 90px 45px 0px 105px;
    background-clip: content-box;
    background-color: #FFFFFF;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-image: url(page_bg.jpg);
    background-attachment: fixed;
}
header, #leftPanel, #rightPanel {
    position: fixed;
}
header {
    top: 0;
    width: 100%;
    height: 90px;
    background-image: url(page_bg.jpg);
    background-attachment: fixed;
}
#leftPanel {
    left: 0;
    top: 0;
    height: 100%;
    width: 105px;
    padding: 90px 0 0 0;
}
#rightPanel {
    right: 0;
    top: 0;
    height: 100%;
    width: 45px;
    padding: 90px 0 0 0;
}

By utilizing this structure, the contents of #mainContent will be contained within the borders of the surrounding elements, causing overflow to display a scrollbar on the body as specified. View example on JSFiddle.

Answer 2

If you are not familiar with HTML syntax:

<body>
    <section id="mainContent"></section>
    <header></header>
    <section id="leftPanel"></section>
    <section id="rightPanel"></section>
</body>

#mainContent {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    min-height: 100%;
    width: 100%;
    padding: 90px 45px 0px 105px;
    background-clip: content-box;
    background-color: #FFFFFF;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-image: url(page_bg.jpg);
    background-attachment: fixed;
}
header, #leftPanel, #rightPanel {
    position: fixed;
}
header {
    top: 0;
    width: 100%;
    height: 90px;
    background-image: url(page_bg.jpg);
    background-attachment: fixed;
}
#leftPanel {
    left: 0;
    top: 0;
    height: 100%;
    width: 105px;
    padding: 90px 0 0 0;
}
#rightPanel {
    right: 0;
    top: 0;
    height: 100%;
    width: 45px;
    padding: 90px 0 0 0;
}

By utilizing this structure, the contents of #mainContent will be contained within the borders of the surrounding elements, causing overflow to display a scrollbar on the body as specified. View example on JSFiddle.

Answer 3

Answer №2

Perhaps this idea has potential. I have created a jsFiddle that demonstrates the concept. It may not be flawless, but there is room for further development... Please note that this code snippet is best suited for modern browsers, although it can be adapted for older versions of Internet Explorer. Below is the key code:

JavaScript:

window.onload = function () {
    var content = document.getElementById('contentwrapper'),
        dimdiv = document.getElementById('scrollingheight'),
        wrapHeight = document.getElementById('fixed').offsetHeight,
        scroller = function () {
            content.style.top = -(document.documentElement.scrollTop || document.body.scrollTop) + 5 + 'px';
            return;
        };
    dimdiv.style.minHeight = (content.scrollHeight - wrapHeight + 2 * 5) + 'px';
    window.addEventListener('scroll', scroller, false);
    return; 
}

CSS:

#fixed {
    position: fixed;
    min-width: 300px;
    min-height: 200px;
    max-height: 200px;
    background: #fff;
    left: 150px;
    top: 200px;
    overflow-y: hidden;
    border: 1px solid #000;
}
#contentwrapper {
    max-width: 290px;
    position: absolute;
    top: 5px;
    left: 5px;
}
#scrollingheight {
    position: absolute;
    top: 100%;
    visibility: hidden;
    min-width: 1px;
}

HTML:

<div id="scrollingheight"></div>
<div id="fixed">
    <div id="contentwrapper">
        content
    </div>
</div>

It's important to note that all content within the body, except for #scrollingheight, needs to be fixed. The constant value of 5 corresponds to the top property of #contentwrapper.

Answer 4

Perhaps this idea has potential. I have created a jsFiddle that demonstrates the concept. It may not be flawless, but there is room for further development... Please note that this code snippet is best suited for modern browsers, although it can be adapted for older versions of Internet Explorer. Below is the key code:

JavaScript:

window.onload = function () {
    var content = document.getElementById('contentwrapper'),
        dimdiv = document.getElementById('scrollingheight'),
        wrapHeight = document.getElementById('fixed').offsetHeight,
        scroller = function () {
            content.style.top = -(document.documentElement.scrollTop || document.body.scrollTop) + 5 + 'px';
            return;
        };
    dimdiv.style.minHeight = (content.scrollHeight - wrapHeight + 2 * 5) + 'px';
    window.addEventListener('scroll', scroller, false);
    return; 
}

CSS:

#fixed {
    position: fixed;
    min-width: 300px;
    min-height: 200px;
    max-height: 200px;
    background: #fff;
    left: 150px;
    top: 200px;
    overflow-y: hidden;
    border: 1px solid #000;
}
#contentwrapper {
    max-width: 290px;
    position: absolute;
    top: 5px;
    left: 5px;
}
#scrollingheight {
    position: absolute;
    top: 100%;
    visibility: hidden;
    min-width: 1px;
}

HTML:

<div id="scrollingheight"></div>
<div id="fixed">
    <div id="contentwrapper">
        content
    </div>
</div>

It's important to note that all content within the body, except for #scrollingheight, needs to be fixed. The constant value of 5 corresponds to the top property of #contentwrapper.

Answer 5

Answer №3

From my understanding, it seems impossible to accomplish that task.
Unless you resort to some advanced JavaScript techniques.
Why? Well, because adjusting the default scrollbar height of a browser (making it smaller) to accommodate content in a different part of the html, body (document) is not feasible.
I recommend creating a custom scrollbar instead, measuring the height of your sleek overflow hidden section, and factoring it into the scrolling calculation.

Answer 6

From my understanding, it seems impossible to accomplish that task.
Unless you resort to some advanced JavaScript techniques.
Why? Well, because adjusting the default scrollbar height of a browser (making it smaller) to accommodate content in a different part of the html, body (document) is not feasible.
I recommend creating a custom scrollbar instead, measuring the height of your sleek overflow hidden section, and factoring it into the scrolling calculation.

Utilize the browser/page scroll bar to navigate through the fixed-position div's content

Answer №1

Answer №2

Answer №3

Similar questions

Place an image at the center with a height set to 100% within a div that has a fixed height and

Indeed, verifying parent.parent access

I am interested in dynamically changing the texture/material of a .obj file during runtime with the click of a button using three.js

Finding specific data in sessionStorage using an ID or key

What happens if I define both the left and right properties for spans?

"Combining the CakePHP media plugin with the dynamic functionality of the jQuery File

Utilizing the Google Maps API to display markers within a custom-drawn polygon

JavaScript's getDate() function is failing to properly adjust the date when performing addition and subtraction operations

Merge two primary loops within a single node.js process

Having trouble sending POST requests in Express?

The data visualization tool Highchart is struggling to load

Tips for updating the appearance of navigation bar links by changing text and background colors upon hover:

How can you use ng-click to disable a div in AngularJS?

Floating an Image to the Right of Bootstrap Tabs

Tips for transforming a few Nuxt snippets into Vue components

Creating a flexible layout using Flexbox

The words streaked across the page like shooting stars, leaving

Pagination not displaying results beyond the initial page

Conceal player controls for HTML videos on iOS devices

How to use Laravel to show a graph sourced from a separate database connection