【发布时间】：2021-05-26 11:16:19
【问题描述】：
我正在使用 Scss 设置页面样式，需要为 HTML 页面的特定部分设置滚动。
当用户进行滚动时，我需要将类别（左）和购物车（右）区域保持在他们的位置。但是中心部分需要滚动，直到过滤的项目到达顶部（面包屑的底部）。如果用户进一步滚动，过滤后的项目将在过滤器和搜索栏部分下方滚动。
谁能帮我解决它。
HTML：
<div class="container-fluid px-5">
<div class="row pt-4 pr-0">
<div class="col-sm-12 px-4 pt-2">
<app-gropcard-breadcrumb></app-gropcard-breadcrumb>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<mat-card class="col-sm-12 p-0 mat-elevation-z10" style="background-color: #0084FF;color: white;">
<mat-card-header class="d-flex justify-content-center p-2">
<mat-card-title class="mb-0">Categories</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="tree mt-3 pl-3 ">
<!-- This is the tree node template for leaf nodes -->
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
<li class="mat-tree-node">
<!-- use a disabled button to provide padding for tree leaf -->
<button class="TreeButton" mat-icon-button disabled></button>
<span (click)="Category(node)">{{node.name}}</span>
</li>
</mat-tree-node>
<!-- This is the tree node template for expandable nodes -->
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
<li>
<div class="mat-tree-node" [attr.aria-label]="'toggle ' + node.name">
<button class="TreeButton" mat-icon-button matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
<span matTreeNodeToggle (click)="Category(node)">{{node.name}}</span>
</div>
<ul class="pl-2" [class.tree-invisible]="!treeControl.isExpanded(node)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</li>
</mat-nested-tree-node>
</mat-tree>
</mat-card-content>
</mat-card>
</div>
<div class="col-sm-6 containerbackground">
<div class="col-sm-12 p-0 d-flex justify-content-center">
<img class="w-100 banner"
[src]="mListedPartyBanner">
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<div class="row">
<h5 class="mt-4 mb-2">Filtered Items</h5>
</div>
</div>
<div class="col-sm-5 search pt-4" fxShow="true" fxHide.gt-sm="false">
<form class="search" >
<mat-form-field class="w-100" appearance="outline">
<input type="text" #myInput matInput placeholder="Search" maxlength="50" (input)="Search(myInput.value)" autocomplete='null' [formControl]="myControl">
<button matTooltip="Search" matSuffix mat-icon-button>
<mat-icon>
search
</mat-icon>
</button>
</mat-form-field>
</form>
</div>
<div class="col-sm-4 d-flex justify-content-end">
<div class="View mt-4 mb-2 mr-4">
<div class="row">
<button matTooltip="Filter"[matMenuTriggerFor]="menu" mat-icon-button>
<mat-icon>filter_list</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button (click)="sortBy(data?.id)" mat-menu-item *ngFor="let data of sortList" [value]="data?.id">
<span>{{data?.value}}</span>
</button>
</mat-menu>
<button [ngClass]="{'ActiveButton': displayMode === 1}" (click)="onDisplayModeChange(1)"
matTooltip="List view" mat-icon-button>
<mat-icon>view_headline</mat-icon>
</button>
<button [ngClass]="{'ActiveButton': displayMode === 2}" (click)="onDisplayModeChange(2)"
matTooltip="Grid view" mat-icon-button>
<mat-icon>view_module</mat-icon>
</button>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="col-sm-12" *ngIf='displayMode==1'>
<div class="row d-flex justify-content-center">
<div class="col-sm-6 p-2 " *ngFor="let prod of ListedPartyItems; let ind = index">
<mat-card class="py-1" matRipple>
<div class="corner-ribbon top-right sticky blue shadow" *ngIf='prod?.PROMO_PRICE'>
{{((prod?.PRODUCT_PRICE-prod?.PROMO_PRICE)/prod?.PRODUCT_PRICE)*100 | number: '1.0-0'}}% Off</div>
<div class="row">
<div class="ImageDiv">
<img class="w-100 Img p-1" [src]="prod['IMAGE_PATH_1']">
</div>
<div class="row NameDiv d-flex ProductData justify-content-center">
<div class="Name mt-2">
<span>{{prod?.ITEM_DESCRIPTION}}</span>
</div>
<div class="Price mt-2">
<span class="ProductPrice">{{prod?.PROMO_PRICE ? (prod?.PROMO_PRICE | number:'.1-2') :
(prod?.PRODUCT_PRICE | number:'.1-2')}}<span class="pl-1"
[innerHtml]="mCurrencyCode"></span></span>
<span class="PromotionPrice mt-1 pl-1" *ngIf='prod?.PROMO_PRICE'>{{prod?.PRODUCT_PRICE |
number:'.1-2'}}<span class="pl-1" [innerHtml]="mCurrencyCode"></span></span>
</div>
<div class="col-sm-12">
<div class="row">
<div class="d-flex justify-content-center mt-2 w-100">
<button type="button" (click)="Decrement( ind)" class="btnStyles">–</button>
<input type="text" readonly class="quantityBox" [(ngModel)]="prod.qty">
<button type="button" (click)="Increment(ind)" class="btnStyles">+</button>
</div>
<div class="col-sm-12 mt-2 d-flex justify-content-center">
<div class="row">
<div class="col-sm-6">
<button (click)="AddToCart(prod?.PRODUCT_CODE,prod?.UOM,prod?.qty, ind)"
class="col-sm-12 ProductButton " mat-raised-button>
<mat-icon class="iconSize Cursor">shopping_cart</mat-icon>
</button>
</div>
<div class="col-sm-6">
<button (click)="SelectedProduct(prod?.PRODUCT_CODE)" class="col-sm-12 ProductButton"
mat-raised-button>More</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</mat-card>
</div>
</div>
</div>
<div class="col-sm-12" *ngIf='displayMode==2'>
<div class="row">
<div *ngIf="IsItemFound" style="display:block;margin:auto;">
<img src="../../../../assets/oops.png" alt="">
</div>
<div class="col-sm-4 p-2" *ngFor="let prod of ListedPartyItems; let ind = index">
<mat-card matRipple class="p-0 ">
<div class="corner-ribbon top-right sticky blue shadow" *ngIf='prod?.PROMO_PRICE'>
{{((prod?.PRODUCT_PRICE-prod?.PROMO_PRICE)/prod?.PRODUCT_PRICE)*100 | number: '1.0-0'}}% Off</div>
<img class="d-block w-100 Img p-1" [src]="prod['IMAGE_PATH_1']">
<div class="w-100 d-flex ProductData justify-content-center">{{prod?.ITEM_DESCRIPTION}}</div>
<div class="col-sm-12 mt-2 d-flex justify-content-center">
<span class="ProductPrice">{{prod?.PROMO_PRICE ? (prod?.PROMO_PRICE | number:'.1-2') :
(prod?.PRODUCT_PRICE | number:'.1-2')}}<span class="pl-1"
[innerHtml]="mCurrencyCode"></span></span>
<span class="PromotionPrice mt-1 pl-1" *ngIf='prod?.PROMO_PRICE'>{{prod?.PRODUCT_PRICE |
number:'.1-2'}}<span class="pl-1" [innerHtml]="mCurrencyCode"></span></span>
</div>
<div class="d-flex justify-content-center mt-2">
<button type="button" (click)="Decrement( ind)" class="btnStyles">–</button>
<input type="text" readonly class="quantityBox" [(ngModel)]="prod.qty">
<button type="button" (click)="Increment(ind)" class="btnStyles">+</button>
</div>
<div class="w-100 mt-2">
<div class="row">
<div class="w-50 ">
<button (click)="AddToCart(prod?.PRODUCT_CODE,prod?.UOM,prod?.qty, ind)"
class="col-sm-12 ProductButton p-0" mat-raised-button>Add To Cart</button>
</div>
<div class="w-50">
<button (click)="SelectedProduct(prod?.PRODUCT_CODE)" class="col-sm-12 ProductButton p-0"
mat-raised-button>More</button>
</div>
</div>
</div>
</mat-card>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<mat-card class="col-sm-12 p-0 mat-elevation-z10 YourCartheight">
<mat-card-header class="d-flex justify-content-center p-2" style="background-color: #0084FF;color: white;">
<mat-card-title class="mb-0">Your Cart</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="col-sm-12" *ngIf="!IsMyCartHasItems">
<div class="row">
<div class="col-sm-12 d-flex justify-content-center mt-4">
<img class="d-block w-100 emptycart p-1" src="../../../../../assets/cart.png" alt="No Data">
</div>
<div class="col-sm-12 pb-4 d-flex justify-content-center">
<span>There are no items in your cart.</span>
</div>
</div>
</div>
<div class="col-sm-12 p-2" *ngIf="IsMyCartHasItems">
<div class="row" *ngFor="let prod of MyCart; let i = index">
<div class="col-sm-4 p-2">
<div class="col-sm-12 p-2">
<span style="font-size: 12px;">{{prod.ITEM_DESC}}</span>
</div>
</div>
<div class="col-sm-4 p-0 d-flex justify-content-center">
<div class="col-sm-12 p-2 mt-2">
<button type="button" (click)="Decrementsub(prod?.ITEM_CODE,prod?.ITEM_PACK_SIZE,prod?.TOTAL_QTY,i)" class="cartBtn">–</button>
<input type="text" readonly class="quantityBox1" [value]="prod.TOTAL_QTY">
<button type="button" (click)="Incrementsub(prod?.ITEM_CODE,prod?.ITEM_PACK_SIZE,prod?.TOTAL_QTY,i)" class="cartBtn">+</button>
</div>
</div>
<div class="col-sm-2 p-0 d-flex justify-content-center">
<div class="col-sm-12 p-2 mt-2">
<span>{{prod?.TOTAL_AMT | number}} <span class="pl-1 Price"
[innerHtml]="mCurrencyCode"></span></span>
</div>
</div>
<div class="col-sm-2 p-0 d-flex justify-content-center">
<div class="col-sm-12 p-1">
<button matTooltip="Remove"
(click)="RemoveCartProduct(prod?.ITEM_CODE,prod?.ITEM_PACK_SIZE)" mat-icon-button
color="warn">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
<div class="col-sm-12 p-0 d-flex justify-content-center">
<button (click)='GoToCheckout()' class="col-sm-12 p-0 checkout" color="warn" mat-raised-button>CHECK
OUT <strong *ngIf='mCartCount > 0' class="pl-4" style="font-size: 20px;">{{TotalAmount | number}}<span class="pl-1 Price"
[innerHtml]="mCurrencyCode"></span></strong></button>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
</div>
</div>
SCSS：
.Img{
height: 200px;
@include desktop{
height: 250px;
}
}
.Caption{
font-size: 1em;
font-weight: bold;
@include desktop{
font-size: 1.5em;
}
}
.ProductButton{
background-color: color(messengerBlue);
color: color(basic);
font-weight: bold;
font-size: 1em;
border-radius: 0;
margin-left: 10px;
}
.ProductData{
font-weight: lighter;
font-size: 12px !important;
white-space: normal;
word-wrap: break-word;
color: color(gray);
}
.containerbackground{
background-color:#f1f3f6;
}
.ActiveButton{
background-color: color(primary);
color: color(basic);
}
// Change text colour when inputting text
.search {
//-----Input Field Size----------
::ng-deep .mat-form-field-flex > .mat-form-field-infix {
padding: 0.4em 0px !important;
// padding-bottom: 8px !important;
}
::ng-deep .mat-form-field-label-wrapper {
top: -1.5em;
}
::ng-deep
.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float
.mat-form-field-label {
transform: translateY(-1.1em) scale(0.75);
width: 133.33333%;
}
::ng-deep .mat-form-field {
background-color: white;
::ng-deep .mat-form-field-wrapper {
padding-bottom: 0;
}
::ng-deep .mat-form-field-wrapper {
margin: 0 0;
}
::ng-deep .mat-form-field-outline-start,
.mat-form-field-outline-end {
border-radius: 0 !important;
}
// ::ng-deep .mat-form-field-underline {
// height: 0px;
// }
// ::ng-deep .mat-form-field-infix {
// padding-top: 0px;
// position: relative;
// }
.mat-form-field-underline {
background-color: transparent;
}
.mat-form-field-ripple {
background-color: transparent;
}
}
}
.tree-invisible {
display: none;
}
.tree ul,
.tree li {
margin-top: 0;
margin-bottom: 0;
list-style-type: none;
cursor: pointer;
}
.mat-tree-node {
min-height: 0px;
max-height: 30px;
.TreeButton{
outline: none;
}
}
.Title{
font-size: 1.5em;
font-weight: bold;
}
.banner{
height: 250px;
}
.ImageDiv{
width: 40%;
}
.Img{
height: 130px;
@include desktop{
height: 150px;
}
}
.NameDiv{
width: 60%;
.Name{
width: 100%;
text-align: center;
font-weight: lighter;
font-size: 12px !important;
white-space: normal;
word-wrap: break-word;
color: color(gray);
}
.Price{
width: 100%;
font-weight: bold;
font-size: 1.5em;
color: color(primary);
text-align: center;
}
}
.imgButton{
background-color: color(messengerBlue);
color: color(basic);
font-weight: bold;
font-size: 1em;
border-radius: 0;
}
.btnStyles{
width: 28px;
height: 28px;
background: linear-gradient(#fff, #f9f9f9);
display: inline-block;
border: 1px solid #c2c2c2;
cursor: pointer;
font-size: 16px;
border-radius: 50%;
padding-top: 1px;
line-height: 1;
}
.cartBtn{
width: 20px;
height: 20px;
background: linear-gradient(#fff, #f9f9f9);
display: inline-block;
border: 1px solid #c2c2c2;
cursor: pointer;
font-size: 12px;
border-radius: 50%;
padding-top: 1px;
line-height: 1;
}
.quantityBox{
display: inline-block;
padding: 3px 6px;
width: calc(100% - 60px);
height: 100%;
width: 46px;
height: 28px;
border-radius: 2px;
background-color: #fff;
border: 1px solid #c2c2c2;
margin: 0 9px;
font-weight: bold;
text-align: center
}
.quantityBox1{
display: inline-block;
padding: 3px 6px;
width: calc(100% - 60px);
height: 100%;
width: 25px;
height: 20px;
border-radius: 2px;
background-color: #fff;
border: 1px solid #c2c2c2;
margin: 0 9px;
font-weight: bold;
text-align: center
}
.iconSize {
font-size: 30px;
}
.cursor {
cursor: pointer;
}
.ItemPromotionPrice {
display: inline-block;
text-decoration: line-through;
opacity: .5;
font-size: 20px !important;
color: color(gray);
}
.ProductPrice{
font-weight: bold;
font-size: 1em;
color: color(primary);
}
::ng-deep .mat-form-field {
font-size: 12px; // example
}
.emptycart{
height: 100px !important;
width: 100px !important;
}
.YourCartheight{
min-height: 150px!important;
max-height:500px !important;
}
【问题讨论】：