CSS 如何添加水平滚动条

Posted 2023-04-11

CSS 如何添加水平滚动条
我知道怎么加垂直滚动条

　　设置 overflow 属性：

div
  
  width:150px;
  height:150px;
  overflow:auto;
  

　　overflow属性如下:

　　auto：当此div子元素宽和高大于该div的宽和高时，则会出现对应方向上的滚动条。

　　scroll：不管子元素的宽和高，都出现滚动条，但当子元素宽和高小于父元素时，滚动条不能拖动。

　　推荐使用auto属性，如果只想让水平方向出现滚动条，则使用overflow-x:auto;

参考技术A overflow-x:auto;width:250px;

和垂直滚动条的原理一样啊

如何将水平滚动条添加到 mat-chip

【中文标题】如何将水平滚动条添加到 mat-chip

【英文标题】：how to add horizontal scroll bar to mat-chip

【发布时间】：2021-09-11 06:14:13

【问题描述】：

这是我在 home.component.html 中的代码

<div class="scrollmenu" >
<mat-chip-list>
  <mat-chip *ngFor="let category of categories" class="matchip">
     category.cat_name 
  </mat-chip>
</mat-chip-list>
</div>

下面可以看到home.component.css

.scrollmenu
    width:100%;
    overflow: auto;
  white-space: wrap;

.matchip 
    display: inline-block;

但这不起作用。我需要显示我的 mat-chips 列表可水平滚动。谢谢。

【参考方案1】：

我必须重写内部包装类 mat-chip-list-wrapper 的 css 才能使水平滚动正常工作：

::ng-deep .mat-chip-list-wrapper 
  flex-wrap: unset !important;
  width: 100px;
  overflow-x: scroll;

您可以在https://stackblitz.com/edit/angular-ivy-gxyvf9?file=src/app/app.component.css查看工作示例

【讨论】：

非常感谢。你救了我。这对我有用。

【参考方案2】：

在 home.component.css 中这样尝试

.matchip
    width:100%;
    display: flex;
    overflow-x: auto;
  

【参考方案3】：

你可以试试这个吗？我希望这就是你要找的东西

.scrollmenu
  width: 200px;
  max-height: 40px;
  overflow-y: hidden;

.scrollmenu ::ng-deep .mat-chip-list-wrapper
  flex-wrap: inherit !important;