絶対配置された要素を水平にスクロールしますか？

Question

以下のコードで何が問題になっていますか？望ましい動作は、#library要素が「画面」の下部にまたがって水平にスクロールすることです。

#library { 
 
position: absolute; 
 
bottom: 0; left: 0; right: 0; 
 
height: 60px; 
 
overflow-x: scroll; 
 
overflow-y: hidden; 
 
} 
 

 
body { overflow: hidden; } 
 

 
.item { 
 
display: inline-block; 
 
width: 50px; height: 50px; 
 
margin: 5px; 
 
border: 1px solid gray; 
 
}

<div id="library"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

Answer 1

.item要素彼らは#libraryの終わりに到達したときにラップします。 overflow-y: hiddenのため、ラップされた要素の複数の行は表示されません。項目が折り返されないようにwhite-space: nowrap;〜#libraryを追加してください。

#library { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 60px; 
 
    overflow: scroll; 
 
    overflow-y: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
body { 
 
    overflow: hidden; 
 
} 
 

 
.item { 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 5px; 
 
    border: 1px solid gray; 
 
}

<div id="library"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>