CSS : 在悬停时滚动特定的 div 而不是仅使用 CSS 滚动整个页面

Question

我有左侧菜单和页面中心的内容。

当我将鼠标悬停在左侧菜单上并想要滚动菜单时，整个页面都会随着菜单滚动。

当我悬停并想要滚动该菜单时，我只想滚动左侧菜单

我可以只使用 CSS 吗？

.app-aside {
  float: left;
  position: absolute;
  min-height: 100%;
  z-index: 1000 !important;
  background: #3a3f51;
}
.app-aside-fixed .aside-wrap {
  position: fixed;
  top: 50px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  width: 199px;
  overflow: hidden;
}
.app-aside-fixed .aside-wrap .navi-wrap {
  position: relative;
  width: 217px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.app-aside-fixed .aside-wrap .navi-wrap::-webkit-scrollbar {
  -webkit-appearance: none;
}
.app-aside-fixed .aside-wrap .navi-wrap::-webkit-scrollbar:vertical {
  width: 17px;
}
.app-aside-fixed .aside-wrap .navi-wrap {
  position: relative;
  width: 217px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.app-aside-fixed .aside-wrap .navi-wrap::-webkit-scrollbar {
  -webkit-appearance: none;
}
.app-aside-fixed .aside-wrap .navi-wrap::-webkit-scrollbar:vertical {
  width: 17px;
}
.app-aside-fixed .aside-wrap .navi-wrap>*,
.smart .app-aside-fixed .aside-wrap .navi-wrap {
  width: 200px;
}
.app-aside-fixed.app-aside-folded .app-aside {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 1010;
}
.navi ul.nav li a {
  color: #99abbf;
  /*color for navigation menu text*/
  position: relative;
  display: block;
  padding: 10px 20px;
  font-weight: 400;
  text-transform: none;
  -webkit-transition: background-color .2s ease-in-out 0s;
  transition: background-color .2s ease-in-out 0s;
}
.app-content {
  height: 100%;
}
.app-content:after,
.app-content:before {
  display: block;
  content: " ";
}
.app-content-full {
  position: absolute;
  top: 50px;
  bottom: 50px;
  width: auto!important;
  height: auto;
  padding: 0!important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.app-content-body {
  float: left;
  width: 100%;
  //padding-bottom: 50px;

}

<div class="app-aside">
  <div class="aside-wrap">
    <div class="navi-wrap">
      <nav class="navi clearfix">
        <ul class="nav">
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>

          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>

          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>

          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
        </ul>
      </nav>
    </div>
  </div>
</div>

<div class="app-content" style="margin-left: 100px;">
  <div class="app-content-body">
    <div style="margin-top: 600px;">fdssfdsfd</div>
  </div>
</div>

任何帮助都会很棒。

谢谢。

Answer 1

试试这个： overflow-y:auto;overflow-x:hidden and margin 和 li 并用 max-height 固定菜单高度

.app-aside {
  float: left;
  position: absolute;
  min-width:100px;
  max-width:auto;
  max-height: 100%;
 text-align:center;
  z-index: 1000 !important;
  background: #3a3f51;
  overflow-y:auto;
  overflow-x:hidden;

 
}
li{
  list-style:none;
  text-align:left;
    margin: 0 -20px auto;
  }

.app-aside-fixed .aside-wrap {
    position: fixed;
    top: 50px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: 199px;
    overflow: hidden;
  }
  .app-aside-fixed .aside-wrap .navi-wrap {
    position: relative;
    width: 217px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .app-aside-fixed .aside-wrap .navi-wrap::-webkit-scrollbar {
    -webkit-appearance: none;
  }
  .app-aside-fixed .aside-wrap .navi-wrap::-webkit-scrollbar:vertical {
    width: 17px;
  }


  .app-aside-fixed .aside-wrap .navi-wrap {
    position: relative;
    width: 217px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .app-aside-fixed .aside-wrap .navi-wrap::-webkit-scrollbar {
    -webkit-appearance: none;
  }
  .app-aside-fixed .aside-wrap .navi-wrap::-webkit-scrollbar:vertical {
    width: 17px;
  }
  .app-aside-fixed .aside-wrap .navi-wrap>*,
  .smart .app-aside-fixed .aside-wrap .navi-wrap {
    width: 200px;
  }
  .app-aside-fixed.app-aside-folded .app-aside {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1010;
  }
  


.navi ul.nav li a {
  color: #99abbf; /*color for navigation menu text*/
  position: relative;
  display: block;
  padding:20px;
  font-weight: 400;
  text-transform: none;;
  -webkit-transition: background-color .2s ease-in-out 0s;
  transition: background-color .2s ease-in-out 0s;
}

.app-content {
  height: 100%;
}

.app-content:after,
.app-content:before {
  display: block;
  content: " ";
}

.app-content-full {
  position: absolute;
  top: 50px;
  bottom: 50px;
  width: auto!important;
  height: auto;
  padding: 0!important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


.app-content-body {
  float: left;
  width: 100%;
  //padding-bottom: 50px;
}

<div class="app-aside">
		<div class="aside-wrap">
      <div class="navi-wrap">
      <nav class="navi clearfix" >   
        <ul class="nav">
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>

            <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>

            <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>

            <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
        </ul>
        </nav>
    </div>
   </div>
  </div>

<div class="app-content" style="margin-left: 100px;">
  <div class="app-content-body" >
  <div style="margin-top: 600px;">fdssfdsfd</div>
   </div>
   </div>

Answer 2

试试这个

<div class="app-aside">
  <div class="aside-wrap">
    <div class="navi-wrap">
      <nav class="navi clearfix">
        <ul class="nav">
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>

          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>

          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>

          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>

          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>

          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
          <li>Home</li>
        </ul>
      </nav>
    </div>
  </div>
</div>

<div class="app-content" style="margin-left: 200px;">
  <div class="app-content-body">
    <div style="margin-top: 600px;">fdssfdsfd</div>
  </div>
</div>

.app-aside {
    width: 200px;
    height: 100%;
    top: 0;
    position: fixed;
    overflow: auto;
    background: red;
}

现场演示 - https://jsfiddle.net/grinmax_/L3zs3s6p/