Getting rid of unwanted scrollbars in a breeze

Question

Getting rid of unwanted scrollbars in a breeze

I am facing an issue with two nested divs that have the same height settings.

The outer div has a max-width/height constraint along with overflow auto, causing scrollbars to appear when the inner content exceeds its dimensions.

However, even if I resize both divs to be the same size again, the scrollbars remain visible due to one scrollbar affecting the other.

Currently, my temporary workaround involves briefly shrinking the inner div's size and then readjusting it back to match the outer div's dimensions.

Is there a solution available to prevent the scrollbars from staying 'on' when both inner and outer divs are the same size?

Thank you in advance,

Rob

View demo here: JSFiddle

javascript html css

Answer 1

Answer №1

When changes are made to elements via script and the browser fails to update the scrollbar position, it can create a problem.

An effective solution is to trigger a reflow by reverting the overflow back to auto once the operations are completed. Since this process happens quickly, allowing the browser to recalculate the need for scrollbars requires a slight delay.

Here's an example:

window.clickit = function (mode){
    switch(mode){
        case 1:
            ...
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
        case 2:
            ...
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
        case 3:
            ...
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
    }
}
function fixScroll() { outer.style.overflow = 'auto'; }

Demo Fiddle: http://jsfiddle.net/abhitalks/f9c8orf7/1/

Demo Snippet:

window.clickit = function (mode){
    switch(mode){
        case 1:
            outer.style.height='250px';
            outer.style.width='250px';
            inner.style.height='250px';
            inner.style.width='250px';
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
        case 2:
            outer.style.height='100px';
            outer.style.width='100px';
            inner.style.height='100px';
            inner.style.width='100px';
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
        case 3:
            outer.style.height='150px';
            outer.style.width='150px';
            inner.style.height='150px';
            inner.style.width='150px';
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
    }
}
function fixScroll() { outer.style.overflow = 'auto'; }

#outer{
    height: 150px; width: 150px;
    max-width:200px; max-height:200px;
    overflow:auto;
}
#inner {
    background-image: url('//lorempixel.com/200/200');
}

<div id="outer" style="height:150px;width:150px">
    <div id="inner" style="height:150px;width:150px"></div>
</div>
<button onclick="clickit(1);">bigger</button>
<button onclick="clickit(2);">smaller</button>
<button onclick="clickit(3);">reset</button>

Answer 2

When changes are made to elements via script and the browser fails to update the scrollbar position, it can create a problem.

An effective solution is to trigger a reflow by reverting the overflow back to auto once the operations are completed. Since this process happens quickly, allowing the browser to recalculate the need for scrollbars requires a slight delay.

Here's an example:

window.clickit = function (mode){
    switch(mode){
        case 1:
            ...
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
        case 2:
            ...
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
        case 3:
            ...
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
    }
}
function fixScroll() { outer.style.overflow = 'auto'; }

Demo Fiddle: http://jsfiddle.net/abhitalks/f9c8orf7/1/

Demo Snippet:

window.clickit = function (mode){
    switch(mode){
        case 1:
            outer.style.height='250px';
            outer.style.width='250px';
            inner.style.height='250px';
            inner.style.width='250px';
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
        case 2:
            outer.style.height='100px';
            outer.style.width='100px';
            inner.style.height='100px';
            inner.style.width='100px';
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
        case 3:
            outer.style.height='150px';
            outer.style.width='150px';
            inner.style.height='150px';
            inner.style.width='150px';
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
    }
}
function fixScroll() { outer.style.overflow = 'auto'; }

#outer{
    height: 150px; width: 150px;
    max-width:200px; max-height:200px;
    overflow:auto;
}
#inner {
    background-image: url('//lorempixel.com/200/200');
}

<div id="outer" style="height:150px;width:150px">
    <div id="inner" style="height:150px;width:150px"></div>
</div>
<button onclick="clickit(1);">bigger</button>
<button onclick="clickit(2);">smaller</button>
<button onclick="clickit(3);">reset</button>

Answer 3

Answer №2

Update your CSS with the following code:

#container{
width:300px;
height:300px;
background-color:blue;
overflow:auto;

}

Answer 4

Update your CSS with the following code:

#container{
width:300px;
height:300px;
background-color:blue;
overflow:auto;

}

Getting rid of unwanted scrollbars in a breeze

Answer №1

Answer №2

Similar questions

Navigate through each of the pictures within the folder and encode them into base64

Adjusting the size of all elements on a webpage

The measure of the leaflet map's vertical dimension in a Shiny module application

Utilizing JQuery AJAX to Submit a JSONP Form with File Attachments

I'm having trouble asynchronously adding a row to a table using the @angular/material:table schematic

JavaScript code that displays items in a shopping cart

.htaccess rule cannot process dots in the file names

Choose a specific parameter from a line using the body parser in Node.js

Angular component with optional one-way binding for version 1.5 and above

Display information on a web page based on user input using HTML

Arrange data in JSON file based on job title (role name) category

Issues with Bootstrap-slider.js functionality

Tips for Enhancing the Appearance of a List Input Box

Calculate the total number of vacation days not including holidays and weekend days

A Guide to Utilizing Parameters in Javascript Strings

Troubleshooting: AngularJS routing issue

An issue occurred with player.markers not being recognized as a function when trying to utilize videojs markers

Exploring the world of jQuery AJAX alongside Google's currency calculator

Steps for integrating an Angular 2 App into Express.js as a view

Attempting to utilize the JavascriptExecutor for button testing, however encountering an error message stating 'Unexpected keyword or identifier'