使用 FlexBox Grid 的角度材料(mat-tab)内的水平滚动条
Posted
技术标签:
【中文标题】使用 FlexBox Grid 的角度材料(mat-tab)内的水平滚动条【英文标题】:Horizontal scrollbar inside angular-material (mat-tab) using FlexBox Grid 【发布时间】:2021-09-10 15:26:24 【问题描述】:我正在尝试实现一个水平滚动条来显示图像,但是包装器(滚动容器)容器的宽度溢出了。我还需要使用 FlexBox 网格来使其响应不同的屏幕尺寸。
html 和 SCSS 的结构如下所示。容器必须在 mat-tab-group(Angular 材质)内。 div 'item' 将包含多个项目。
我在 chrome 上运行它并检查了检查器,显然 mat-tab-body-wrapper display: flex 属性导致了这个问题。 这个问题有解决办法吗?
HTML
<mat-tab-group>
<mat-tab label="First">
<div class='row scroll-container'>
<div class='col-xs-5 col-sm-8 col-md-9 col-lg-12'>
<div class='horizontal-slider'>
<div class='slider-container'>
<div class='item'>
<img src='' alt=''>
</div>
</div>
</div>
</div>
</div>
</mat-tab>
</mat-tab-group>
SCSS
.scroll-container
margin: 8px 0 0 0;
.horizontal-slider
display: flex;
overflow-y: hidden;
max-width: inherit;
overflow-x: scroll;
box-sizing: border-box;
.slider-container
.item
display: flex;
margin-right: 8px;
img
width: 124px;
height: 124px;
【问题讨论】:
【参考方案1】:最有效的解决方案如下所示。除了 flex-nowrap 之外,您还需要设置溢出属性以防止整个页面扩展。
具有溢出属性:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<h6>Bootstrap 4 horizontally scrollable card groups</h6>
<div class="d-flex flex-row flex-nowrap overflow-auto">
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
</div>
【讨论】:
我需要使用 flexbox 网格而不是 Bootstrap。 @NikhilMoreI need to do it using flexbox grid and not Bootstrap
将此类添加到问题正文中。
设置 .horizontal-sliderdisplay:flex;width:100%;max-width:100%;height:auto;overflow-x:scroll;overflow-y:scroll以上是关于使用 FlexBox Grid 的角度材料(mat-tab)内的水平滚动条的主要内容,如果未能解决你的问题,请参考以下文章
如何避免使用角度材料从角度 2 中的 mat-table 传输相同的行
为啥使用自定义全局验证器在角度材料 6 的 mat-form 字段中未显示 mat-error