识别正在滚动以删除属性的元素答案

【问题标题】：Identify the element that is being scrolled to remove properties识别正在滚动以删除属性的元素
【发布时间】：2020-06-17 00:32:56
【问题描述】：

边栏正在创建一个空白，我需要删除它的滚动属性。当我展开侧边栏时，会在侧边栏下方创建空白。也许是柔性显示，但其他显示模式将元素推到下方，而不是将它们留在侧导航的一侧，这超出了侧导航的目的。 此问题仅发生在移动设备上。侧边栏是可滚动的，使用 ngif 出现的项目也是可滚动的，所以我没有得到空白的来源

<div class="container-fluid rightie">
    <button type="button" id="cart" class="btn btn-link rightee">
        <i class="fa fa-cart-plus" aria-hidden="true"></i>
    </button>
</div>
<div class="wrapper">
    <nav id="sidebar">
        <div class="sidebar-header">
            <p class="lead">Reap</p>
            <img class="image" id="blah" [src]="imageSrc || '../../../assets/profile.png'" alt="my image" />
        </div>
        <ul class="list-unstyled components">
            <p class="newer" role="button" routerLink="/profile">Username</p>
            <li>
                <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Produce</a>
                <ul class="collapse list-unstyled" id="homeSubmenu">
                    <li>
                        <a class="smaller" id="myproducts" (click)="myproducts()">MyProducts</a>
                    </li>
                    <li>
                        <a class="smaller" id="addproducts" (click)="addproducts()">Add Products</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Purchase</a>
                <ul class="collapse list-unstyled" id="pageSubmenu">
                    <li>
                        <a class="smaller" id="farmingproduce" (click)="farmingproduce()">Farm Produce</a>
                    </li>
                    <li>
                        <a class="smaller" id="farmingtools" (click)="farmingtools()">Farming Tools</a>
                    </li>
                    <li>
                        <a class="smaller" id="farmingequipment" (click)="farmingequipment()">Farming Equipment</a>
                    </li>
                    <li>
                        <a class="smaller" id="farmingchemicals" (click)="farmingchemicals()">Farming Chemicals</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#pageSubmenu0" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Farm Orders</a>
                <ul class="collapse list-unstyled" id="pageSubmenu0">
                    <li>
                        <a class="smaller" id="farmpendingorders" (click)="farmpendingorders()">
                           Farm Pending Orders
                       </a>
                    </li>
                    <li>
                        <a class="smaller" id="farmfulfilledorders" (click)="farmfulfilledorders()">
                            Farm Fulfilled Orders
                        </a>
                    </li>
                    <li>
                        <a class="smaller" id="farmallorders" (click)="farmallorders()">
                            All Farm Orders
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#pageSubmenu1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Orders</a>
                <ul class="collapse list-unstyled" id="pageSubmenu1">
                    <li>
                        <a class="smaller" id="pendingorders" (click)="pendingorders()">
                           Pending Orders
                       </a>
                    </li>
                    <li>
                        <a class="smaller" id="fulfilledorders" (click)="fulfilledorders()">
                            Fulfilled Orders
                        </a>
                    </li>
                    <li>
                        <a class="smaller" id="allorders" (click)="allorders()">
                            All Orders
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#pageSubmenu2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pricing</a>
                <ul class="collapse list-unstyled" id="pageSubmenu2">
                    <li>
                        <a class="smaller" id="percounty" (click)="percounty()">
                            Per County
                        </a>
                    </li>
                    <li>
                        <a class="smaller" id="perproduct" (click)="perproduct()">
                            Per Product
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#pageSubmenu3" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">About</a>
                <ul class="collapse list-unstyled" id="pageSubmenu3">
                    <li>
                        <a class="smaller" id="aboutus" (click)="aboutus()">
                            About Us
                        </a>
                    </li>
                    <li>
                        <a class="smaller" id="moreinfo" (click)="moreinfo()">
                            More Info
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
    <div id="content">
        <nav class="navbar navbar-expand-lg abs">
            <div class="container-fluid">
                <button type="button" id="sidebarCollapse" class="btn btn-outline-light">
                    <i class="fas fa-align-left"></i>
                </button>
            </div>
        </nav>
        <div class="reap" *ngIf="jumbo == 0 || jumbo > 15 || jumbo < 0">
            <app-my-products></app-my-products>
        </div>
        <div class="reap" *ngIf="jumbo == 1">
            <app-add-products></app-add-products>
        </div>
        <div class="reap" *ngIf="jumbo == 2">
            <app-farm-produce></app-farm-produce>
        </div>
        <div class="reap" *ngIf="jumbo == 3">
            <app-farming-tools></app-farming-tools>
        </div>
        <div class="reap" *ngIf="jumbo == 4">
            <app-farming-equipment></app-farming-equipment>
        </div>
        <div class="reap" *ngIf="jumbo == 5">
            <app-farming-chemicals></app-farming-chemicals>
        </div>
        <div class="reap" *ngIf="jumbo == 6">
            <app-farm-pending-orders></app-farm-pending-orders>
        </div>
        <div class="reap" *ngIf="jumbo == 7">
            <app-farm-fulfilled-orders></app-farm-fulfilled-orders>
        </div>
        <div class="reap" *ngIf="jumbo == 8">
            <app-all-farm-orders></app-all-farm-orders>
        </div>
        <div class="reap" *ngIf="jumbo == 9">
            <app-pending-orders></app-pending-orders>
        </div>
        <div class="reap" *ngIf="jumbo == 10">
            <app-fulfilled-orders></app-fulfilled-orders>
        </div>
        <div class="reap" *ngIf="jumbo == 11">
            <app-all-orders></app-all-orders>
        </div>
        <div class="reap" *ngIf="jumbo == 12">
            <app-per-county></app-per-county>
        </div>
        <div class="reap" *ngIf="jumbo == 13">
            <app-per-product></app-per-product>
        </div>
        <div class="reap" *ngIf="jumbo == 14">
            <app-about-us></app-about-us>
        </div>
        <div class="reap" *ngIf="jumbo == 15">
            <app-more-info></app-more-info>
        </div>
    </div>
</div>

这是一个参考链接，，，这只发生在移动设备上 [有问题的元素][1] https://reaphoster.web.app/farmerparent

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
.wrapper {
    display: flex;
    align-items: stretch;
    /*bottom: 0;*/
    height: 100vh;
    overflow: hidden;
}

.limbo {
    margin-left: 50%;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    bottom: 0;
    background-image: linear-gradient(to right, #cbe4d3 0%, #dae4e1 51%, #d7cfe9 100%);
    min-height: 100vh;
    /*bottom: 0;*/
    overflow-y: scroll;
}

.filing {
    height: 30px;
    border-radius: 40%;
    width: 200px;
    max-width: 200px;
}

.image {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    padding-left: 10%;
    padding-right: 10%;
}

.newer:hover {
    background-image: linear-gradient(to bottom, #cbe4d3 0%, #dae4e1 51%, #d7cfe9 100%);
}

#sidebar.active {
    margin-left: -250px;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
        margin-bottom: 0px;
        padding-bottom: 0px;
        overflow: hidden;
    }
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

#sidebar {
    /* don't forget to add all the previously mentioned styles here too */
    /*background: #7386D5;*/
    color: rgb(146, 145, 145);
    transition: all 0.3s;
}

::-webkit-scrollbar {
    width: 2px;
}


/* Track */

 ::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 1px;
}


/* Handle */

 ::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 1px;
}


/* Handle on hover */

 ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.fa {
    float: right;
    position: initial;
}

#sidebar .sidebar-header {
    padding: 20px 20px 0px 20px;
    /*background: #6d7fcc;*/
}

#sidebar ul.components {
    padding: 0px 0px 20px 0px;
    /*border-bottom: 1px solid #47748b;*/
}

.lead {
    text-align: center;
}

#sidebar ul p {
    color: rgb(146, 145, 145);
    padding: 10px;
    padding-left: 20px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
    padding-left: 20px;
}

#sidebar ul li a:hover {
    /*color: #7386D5;*/
    /*background: rgb(121, 172, 238);*/
    background-image: linear-gradient(to bottom, #cbe4d3 0%, #dae4e1 51%, #d7cfe9 100%);
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: rgb(146, 145, 145);
    background-image: linear-gradient(to top, #cbe4d3 0%, #dae4e1 51%, #d7cfe9 100%);
    /*background: #6d7fcc;*/
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    /*background: #6d7fcc;*/
}

#cart {
    background-image: linear-gradient(to top, #cbe4d3 0%, #dae4e1 51%, #d7cfe9 100%);
}

.rightie {
    float: right;
    position: absolute;
}

.btn {
    color: rgb(167, 167, 167);
    background-image: linear-gradient(to top, #cbe4d3 0%, #dae4e1 51%, #d7cfe9 100%);
}

.rightee {
    float: right;
    position: relative;
    margin-top: 8px;
}

.abs {
    position: absolute;
}

.content {
    position: relative;
    width: 100%;
}

#content {
    max-width: 100%;
    max-height: 100%;
}


  [1]: https://reaphoster.web.app/farmerparent

【问题讨论】：

标签： javascript html jquery css angular

【解决方案1】：

尝试将您的侧导航栏位置设置为固定。

nav {
    position: fixed;
    z-index: 1;
    background-color: white;
}

也是一个工作示例：

nav
{
    position:fixed;
    width: 100px
    height: 200px;
    top: 0;
    left: 0;
    background-color: white;
}

nav ul
{
    position: absolute;
    height: 200px;
    top: 50%;
    
}

.content
{
    margin: 30px 220px;
    background-color:red;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Sidebar fixed</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
        </nav>
        <div class="content">
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.iam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ametsdiam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
        </div>
    </body>
</html>

【讨论】：