ドロップダウン メニューをスクロール効果として設定します

ドロップダウン メニューをスクロール効果として設定するには、次の手順が必要です。

1. ドロップダウン メニュー コンテナの高さを設定します。

.el-dropdown-menu {
  max-height: 200px; /*设置菜单高度为200px*/
  overflow-y: auto; /*设置滚动条*/
}

。

1. ドロップダウン メニュー コンテナー内にコンテンツを追加し、コンテナーの高さを超えるようにします。

<div class="el-dropdown-menu">
  <ul>
    <!-- 这里添加下拉菜单内容 -->
  </ul>
</div>

1. スクロールバーのスタイルをカスタマイズします。

 

.el-dropdown-menu::-webkit-scrollbar {
  width: 6px; /*滚动条宽度*/
}

.el-dropdown-menu::-webkit-scrollbar-thumb {
  background-color: #c1c1c1; /*滚动条颜色*/
  border-radius: 5px; /*滚动条边角弧度*/
}

上記は、ドロップダウン メニューをスクロール効果として設定する基本的な手順です。実際のニーズに応じてスクロール バーの幅、色、角のラジアン、その他のスタイルを調整して、よりパーソナライズされた効果を実現できます。

なお、スクロール バーはドロップダウン メニューの内容がコンテナの高さを超える場合にのみ表示され、高さを超えない場合はスクロール バーは表示されません。また、一部のブラウザではスクロールバーが機能しない場合があるため、問題を解決するにはスクロールバーのスタイルを変更するか、他の解決策を使用する必要があります。