CODEWITHSUNDEEP
javascripthtmlcssscrollbar
Tabrez Ahmed
Tabrez Ahmed

Reputation: 2950

How to always show scrollbar of inner div when outer div has a smaller width

I have ended up in a scenario where the outer div has a definite height and width whereas the inner div has a definite height but an indefinite width. Like so:

html:

<div id="parent">
  <div id="child">
  </div>
</div

and css:

#parent{
  width: 200px;
  height: 200px;
  overflow-x:scroll; 
  overflow-y:hidden
}
#child{
  width: 400px;
  height: 200px;
  overflow-x:hidden;
  overflow-y:scroll;
}

But as expected, I can see the scrollbar of inner div only when it has been scrolled to the extreme right.

I want to always show both scrollbars.

Please help me find a CSS solution or a plain js (non-jquery) solution.

https://jsfiddle.net/n2tfe2wr/

Upvotes: 1

Views: 207

Answers (1)

rafrsr
rafrsr

Reputation: 2030

Try with this:

 document.getElementById('child-size').style.width = document.getElementById('child-wrapper').scrollWidth+ 'px';
        document.getElementById('parent').addEventListener('scroll', function () {
            document.getElementById('child-wrapper').style.marginLeft = document.getElementById('parent').scrollLeft + 'px';
            document.getElementById('child-wrapper').scrollLeft = document.getElementById('parent').scrollLeft;
        })
#parent {
    width: 200px;
    height: 400px;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
}

#child-wrapper {
    width: 200px;
    height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: blue;
}

#child {
    width: 400px;
    color: white;
}

#child-size {
    height: 1px;
    opacity: 0;
}
<div id="parent">
    <div id="child-size"></div>
    <div id="child-wrapper">
        <div id="child">
            Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.
            <br><br><br>
            Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu,
            legimus senserit definiebas an eos.

            <br><br><br>
            Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu,
            eirmod consectetuer signiferumque eu per.
            <br><br><br>
            In usu latvine equidem dolores.
            <br><br><br>
            Quo no falli viris intellegam, ut fugit veritus placerat per.
        </div>
    </div>

    <br><br>
    Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.
    <br><br><br>
    Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu,
    legimus senserit definiebas an eos.

    <br><br><br>
    Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu,
    eirmod consectetuer signiferumque eu per.
    <br><br><br>
    In usu latvine equidem dolores.
    <br><br><br>
    Quo no falli viris intellegam, ut fugit veritus placerat per.
</div>

Upvotes: 2

Related Questions