當外部div的寬度較小時，如何始終顯示內部div的滾動條

Question

我最后遇到的一個情況是，外部div的高度和寬度是確定的，而內部div的高度是固定的，但是寬度是不確定的。 像這樣：

HTML：

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

和CSS：

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

但是正如預期的那樣，僅當內部div滾動到最右邊時，我才能看到它的滾動條。

我想始終顯示兩個滾動條。

請幫助我找到CSS解決方案或純js（非jquery）解決方案。

https://jsfiddle.net/n2tfe2wr/

Answer 1

試試這個：

  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>