スクロール領域からスクロールバーを消す（可変高さ対応）

qiita.com

スクロールバー消したくてこれを読んでいたら固定幅(高さ)しかできなさそうだったのでいろいろ模索してみた。

ホバーするとliのサイズが変わる。

jsfiddle.net

解説

ulの親要素にoverflow: hidden;を設けてあげてulにネガティブマージンをつけてあげると実現できる。

コード

<p>横スクロールできるけどスクロールバーを非表示にしてる</p>
<div>
  <ul>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>  
  </ul>
</div>

div {
  overflow: hidden;
}

ul {
  display: flex;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 20px;
  margin: 0 0 -20px;
  width: 400px;
  background-color: #ddd;
}

li {
  margin: 0 4px;
  height: 100px;
  background-color: #ccc;
  transition: 0.2s height;
}

li:nth-child(2) {
  background-color: #f00;
}

li:nth-child(2):hover {
  height: 200px;
}

li:nth-child(4) {
  background-color: #0ff;
}

li:nth-child(4):hover {
  height: 50px;
}

余談

こっちはなぜか同僚が作った自動で高さが変わるようにしたデモ。

jsfiddle.net