CSS : Scroll particular div on hover instead of whole page using CSS only

Question

I have left side menu and a content on the center of the page.

When I hover on left side menu and want to scroll the menu , then along with menu the whole page is scrolling.

I want to scroll only left side menu when I hover and want to scroll that menu

Can I do using CSS only?

.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>

Any Help would be great.

Thank You.

use this css property in the div "overfolw: scroll-y" – Álvaro Touzón Feb 03 '17 at 06:49 — Álvaro Touzón, Feb 03 '17 at 06:49

score 0 · Answer 1 · answered Feb 03 '17 at 07:02

Try this : overflow-y:auto;overflow-x:hidden and margin with li and also fix the menu height with 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>

when i scroll whole page then left side div is also scrolling. — , Feb 03 '17 at 09:35

score 0 · Answer 2 · answered Feb 03 '17 at 07:20

Try this

<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;
}

Live demo - https://jsfiddle.net/grinmax_/L3zs3s6p/

thank you for your answer. but i don't want the scroll bar to be seen in left side menu. but it should scroll.. so is it possible? — , Feb 03 '17 at 09:35
@Rishi look this post about hidden scroll http://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page — grinmax, Feb 03 '17 at 10:58

CSS : Scroll particular div on hover instead of whole page using CSS only

2 Answers2