スクロールバーの設定

このページでの基本設定は下記内容となっています。★★★の部分にoverflow:hidden;等を入れてください。

<div class="overflow">
   <p style="white-space: nowrap;">ここに文字</p>
</div>

<style>
.overflow{
    width:10rem;
    height:3rem;
    background-color:#fff;
    ★★★
}
</style>

このページだけだとわかりにくかったので、サンプルページを作りました。サンプルページ

全部消す

サンプル

overflow:hiddenの場合
スクロールは
表示されません。

overflow:hidden;

縦だけ消す

サンプル

overflow-y:hiddenの場合
縦スクロールは
表示されません。

overflow-y:hidden;

横だけ消す

サンプル

overflow-x:hiddenの場合
横スクロールは
表示されません。

overflow-x:hidden;

常に表示

サンプル

overflow:scrollの場合
常に
表示しています。

overflow:scroll;

縦だけ常に表示

サンプル

overflow-y:scrollの場合
常の縦の
表示しています。

overflow-y:scroll;

横だけ常に表示

サンプル

overflow-x:scrollの場合
常の横の
表示しています。

overflow-x:scroll;

2019/04/25:サンプルページを追加しました。
2017/05/25:ページの作成

choco*tip