css 隐藏/取消隐藏Angular 时,侧导航会影响文档位置

fykwrbwg  于 2023-03-24  发布在  Angular
关注(0)|答案(1)|浏览(115)

`我正在用angular构建一个web应用程序,它有一个侧列,其中包含页面的各个部分,当点击它时,用户会进入他们所选择的部分。我遇到了麻烦,因为当我关闭侧列导航时,它会自动滚动内容。我猜这是因为当列打开/关闭时,内容的宽度不同,导致不想要的效果。下面是页面https://supplemental-docs.vercel.app/
document-viewer.component.HTML文件:

<mat-toolbar color="primary">
  <button mat-icon-button (click)="sidenav.toggle()">
    <mat-icon>menu</mat-icon>
  </button>
 
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav #sidenav mode="side" [opened]="isLargeScreen">
    <mat-nav-list>
      <a mat-list-item href="#valid-medical-prescription">Valid Medical Prescription</a>
      <a mat-list-item href="#presentation-original-prescription">Presentation of Original Prescription</a>
      <a mat-list-item href="#doctors-certificate">Doctor's Certificate</a>
      <a mat-list-item href="#health-certificate">Foreign Destination Certificate</a>
    </mat-nav-list>
  </mat-sidenav>`your text`

  <mat-sidenav-content #contentContainer>
    <div class="content">
    <div id="valid-medical-prescription">
      <h1>Valid Medical Prescription</h1>
      <h2>What is a valid medical prescription?</h2>
      <p>
        A valid medical prescription is a written order issued by a licensed medical professional (such as a doctor) to a pharmacist or pharmacy, allowing them to dispense a specific medication to the patient. It includes the patient's name, the medication name, dosage, frequency, and duration of treatment.
      </p>
      <h2>How to obtain a valid medical prescription?</h2>
      <p>
        To obtain a valid medical prescription, consult with a licensed medical professional in your country of residence. Explain your medical condition and the reason for your travel. The doctor will assess your needs and provide you with a prescription if deemed necessary.
      </p>
      <h2>What to expect at the foreign airport?</h2>
      <p>
        When you arrive at the foreign airport, have your valid medical prescription ready for inspection by customs officials. Make sure the prescription is clear and legible, and carry it in your carry-on luggage for easy access. Customs officers may ask you questions about your medication and verify the prescription's authenticity before allowing you to proceed.
      </p>

    </div>

      <div id="presentation-original-prescription">
        <h1>Presentation of the original prescription at the Customs of the country of destination</h1>
        <h2>What is an original prescription?</h2>
        <p>
          To obtain an original prescription, you will need to make an appointment with a licensed healthcare provider and provide them with information about your medical history and any current medications you are taking. After a thorough evaluation, the healthcare provider may write a prescription for the medication you need.
        </p>
        <h2>How to obtain a certificate from health authorities?</h2>
        <p>
          To obtain a certificate from health authorities, contact the health department or ministry of the country you plan to visit. Provide them with details about your medication, valid medical prescription, and doctor's certificate. They may ask for additional information or documentation, such as proof of your medical condition or a letter from your treating physician. Once they have reviewed and approved your documents, they will issue the certificate.
        </p>
        <h2>What to expect at the foreign airport?</h2>
        <p>
          When traveling internationally with prescription medication, it is important to have an original prescription with you, as some countries may require it as proof that the medication is legally prescribed. It is recommended to carry the prescription in your carry-on luggage and not in your checked luggage. At a foreign airport, you may be asked to present your original prescription and/or declare any medication you are carrying with you. It is important to research the medication and the country's regulations beforehand to avoid any issues or delays.
        </p>
      </div>

    <div id="doctors-certificate">
      <h1>Doctor’s Certificate endorsed by the health authorities of the country of residence</h1>
      <h2>What is a doctor's certificate?</h2>
      <p>
        A doctor's certificate, also known as a medical certificate or fit-to-fly certificate, is a document issued by a licensed medical professional confirming the patient's health condition and fitness for travel. It typically includes the patient's name, a brief description of their health condition, and the doctor's assessment of the patient's ability to travel safely.
      </p>
      <h2>How to obtain a doctor's certificate?</h2>
      <p>
        To obtain a doctor's certificate, schedule an appointment with a licensed medical professional in your country of residence. Inform them about your travel plans and any existing medical conditions. The doctor will perform a medical examination and issue a certificate if they determine that you are fit to travel.
      </p>
      <h2>What to expect at the foreign airport?</h2>
      <p>
        Upon arrival at the foreign airport, have your doctor's certificate ready for inspection by customs or health officials. They may ask you questions about your health condition and travel plans. The certificate should be endorsed by the health authorities of your country of residence to ensure smooth processing.
      </p>
    </div>


    <div id="health-certificate">
      <h1>Certificate issued by the health authorities of the country of destination</h1>
      <h2>What is a certificate from health authorities?</h2>
      <p>
        A certificate from health authorities is a document issued by the health department or ministry of the destination country. It verifies that the traveler's medication is allowed in the country and may include information about any restrictions or requirements related to the medication.
      </p>
      <h2>How to obtain a certificate from health authorities?</h2>
      <p>
        To obtain a certificate from health authorities, contact the health department or ministry of the country you plan to visit. Provide them with details about your medication, valid medical prescription, and doctor's certificate. They may ask for additional information or documentation, such as proof of your medical condition or a letter from your treating physician. Once they have reviewed and approved your documents, they will issue the certificate.
      </p>
      <h2>What to expect at the foreign airport?</h2>
      <p>
        When you arrive at the foreign airport, present your certificate from health authorities to the customs officials. They may verify the document's authenticity and ask you questions about your medication or medical condition. Ensure that you have all the necessary paperwork and be prepared to answer any questions. Once your documents are verified, you should be allowed to proceed with your medication.
      </p>
    </div>

    </div>
  </mat-sidenav-content>
</mat-sidenav-container>`

document-viewer.component.scss:

mat-toolbar {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

mat-sidenav-container {
  height: 100%;
  position:fixed;

}

mat-sidenav {
  padding-top: 85px;
  width: 350px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

mat-sidenav-content {
  padding: 1rem;
}

mat-nav-list a{
  font-size: 30px;
  margin-bottom: 50px;

}

.content{
margin: 0 200px;
padding-bottom: 100px;

}

document-viewer.component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

@Component({
  selector: 'app-document-viewer',
  templateUrl: './document-viewer.component.html',
  styleUrls: ['./document-viewer.component.scss']
})
export class DocumentViewerComponent implements OnInit {
  @ViewChild('sidenav') sidenav!: MatSidenav;
  isLargeScreen!: boolean;

  constructor(private breakpointObserver: BreakpointObserver) {}

  ngOnInit() {
    this.breakpointObserver
      .observe([Breakpoints.Handset, Breakpoints.Tablet])
      .subscribe(result => {
        this.isLargeScreen = !result.matches;
        if (!this.isLargeScreen) {
          this.sidenav.close();
        }
      });
  }
}

尝试添加功能到存储用户的位置和锚它的TS文件,但没有任何工作.还要求聊天gtp,它也可以弄清楚XD.不知道我还能做什么.请让我知道,如果你们有任何问题.已经花了不必要的时间试图解决这个简单的问题.`

zd287kbt

zd287kbt1#

你在错误的容器上有溢出,所以scroll anchoring不能工作。这有点难以解释,但链接的文档应该能让你理解。
mat-sidenav-content设置为overflow: hidden,然后将content设置为height: 100%overflow: auto。可能还需要将margin: 0 200px;切换为padding: 0 200px以保持滚动条的位置在右侧。可能还需要一些其他的小样式调整,但这应该可以让您开始。

相关问题