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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.