предотвратить прокрутку содержимого navbar - PullRequest
Новая
       16

предотвратить прокрутку содержимого navbar

0 голосов
/ 27 июня 2019

У меня есть приложение 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;
    }
}

Я хочу, чтобы содержимое внутри панели навигации не было прокручиваемым, любая помощь приветствуется ...

1 Ответ

0 голосов
/ 28 июня 2019

Я добавил overflow: hidden к .toolbar__navigation, и это решило, спасибо @ h-des

...