HTML 内の div にスクロールバーを追加する方法:div スクロールバーの属性とスタイル設定

HTML では、CSSを使用してdivのスクロールバーのプロパティとスタイルを設定できます。以下是一般的な設定方法です。

  1. divのスクロールバーのスタイルを設定する:
div {
overflow: auto; /* 显示滚动条 */
overflow-x: hidden; /* 隐藏水平滚动条 */
overflow-y: scroll; /* 显示垂直滚动条 */
}
  1. スクロールバーのスタイルをカスタマイズする:
/* 定义滚动条的样式 */
div::-webkit-scrollbar {
width: 10px; /* 设置滚动条的宽度 */
}
/* 定义滚动条滑块的样式 */
div::-webkit-scrollbar-thumb {
background-color: #888; /* 设置滑块的背景颜色 */
border-radius: 5px; /* 设置滑块的圆角 */
}
/* 定义滚动条轨道的样式 */
div::-webkit-scrollbar-track {
background-color: #f1f1f1; /* 设置轨道的背景颜色 */
border-radius: 5px; /* 设置轨道的圆角 */
}
  1. スクロールバーを無効にする
div {
overflow: hidden; /* 禁用滚动条 */
}
  1. スクロールバーの幅と色を設定:
div {
scrollbar-width: thin; /* 设置滚动条宽度为thin(细)或auto(自动) */
scrollbar-color: #888 #f1f1f1; /* 设置滚动条的颜色 */
}

一般的に使われるdivのスクロールバーの属性やスタイルの設定方法をいくつかご案内しましたので、ご自身のニーズに合わせて調整してください。

コメントを残す 0

Your email address will not be published. Required fields are marked *


广告
広告は10秒後に閉じます。
bannerAds