바깥 쪽 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; 
} 

그러나 예상대로, 나는 그것이 극단적 인 오른쪽으로 스크롤 된 경우에만 내부 사업부의 스크롤 막대를 볼 수 있습니다.

두 스크롤바를 항상 표시하고 싶습니다.

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>