Question

我有一个带有导航栏的React应用，该导航栏可以滚动其中的内容，我想防止它滚动其内部的内容。

我尝试使链接和徽标更短，尝试为min-height: 100vh;和height: 50%;类设置.toolbar和.toolbar__navigation，但是仍然不能阻止导航栏滚动内部的内容。

这是我的App.js：

  render() {
    let backdrop;
    if (this.state.sideDrawerOpen) {
      backdrop = <Backdrop click={this.backdropClickHandler} />;
    }
    return (
      <div className="main">
        <Navbar drawerClickHandler={this.drawerToggleClickHandler} />
        <SideDrawer show={this.state.sideDrawerOpen} />
        <div className="App">
          {backdrop}
          <main style={{ marginTop: "64px" }}>
            <MuiThemeProvider>
              <Router>
                <Route path="/" exact component={Home} />
                <Route path="/coaches" component={Coaches} />
                <Route path="/consult" component={ConsultationForm} />
                <Route path="/about" component={About} />
              </Router>
            </MuiThemeProvider>
          </main>
        </div>
      </div>
    );
  }

这是我的Navbar.js：

  render() {
    return (
      <header
        className={classnames("toolbar", {
          "toolbar--hidden": !this.state.visible
        })}
      >
        <nav className="toolbar__navigation">
          <div className="toolbar__toggle--button"></div>
          <div className="toolbar__logo">
            <a href="/">
              <img src={logo} className="toolbar__logo--pic" />
            </a>
          </div>
          <div className="spacer"></div>
          <div className="toolbar__navigation--items">
            <ul>
              <li>
                <a href="/consult" className="toolbar__navigation--link">
                  Services
                </a>
              </li>
              <li>
                <a href="/contact" className="toolbar__navigation--link">
                  Contact Us
                </a>
              </li>
              <li>
                <a href="/about" className="toolbar__navigation--link">
                  About Us
                </a>
              </li>
            </ul>
          </div>
          <div />
        </nav>
      </header>
    );
  }

这是我的navbar.scss：


.toolbar {
    position: fixed;
    top: 0;

    left: 0;
    width: 100%;
    overflow: auto;
    background-color: $color-black;
    opacity: 1;
    height: 56px;
    transition: top 0.3s;
    z-index:99;
}

.toolbar__navigation{
    display: flex;
    height: 56px;

    align-items: center;
    padding: 0 1rem;

    &--link{
        color: white;
        &:link,
        &:visited {
            color: $color-grey-light-1;
            text-decoration: none;
            text-transform: uppercase;
            display: inline-block;
        }

        &:hover,
        &:active {
            color: $color-primary;
            box-shadow: 0 1rem 2rem rgba($color-black, .4);
            transform: rotate(5deg) scale(1.3);
        }
    }
}

.toolbar--hidden{
    top: -50px;
    display: none;
}
.toolbar__logo--pic {
    width:85px;
    height: 75px;
}

.toolbar__logo a{
    color: white;
    text-decoration: none;
    font-size: 2rem;
}

.toolbar__logo{
    margin-left: 1rem;
}

.toolbar__navigation--items a{
    color: white;
    text-decoration: none;

}
.spacer{
    flex: 1;
}
.toolbar__navigation--items ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.toolbar__navigation--items li{
    padding: 0 0.5rem;
}
.toolbar__navigation--items a:hover{
    color: red;
    text-decoration: none;   
}

.toolbar__navigation--items a:active{
    color: red;
    text-decoration: none;

}
@media (max-width: 768px){
    .toolbar__navigation--items {
        display: none;
    }
}

@media (min-width: 769px){
    .toolbar__toggle--button{
        display: none;
    }
    .toolbar__logo{
        margin-left: 0;
    }
}

我希望导航栏内的内容不可滚动，将不胜感激...

Answer 1

我将overflow: hidden添加到.toolbar__navigation并解决了，谢谢@ h-des

防止导航栏内容滚动

1 个答案: