Scrolling element without scrollbar with CSS

Question

JSbin here for visuals and code.

Left sidebar, full height, fixed position, content overflows that needs to be accessible WITHOUT scrollbars (that means no ove

Answer 1

If you can set the height and width of the parent, left-wrap, you can do it this way:

#left-wrap {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0; /* Not sure why this is here */
  z-index: 3;
  max-width: 24em;
  max-height: none;  
  overflow: hidden;
  height:100%; /* Needs to be given a height and width as far as I know */
  width:1000px; /* They can be whatever dimensions you'd like, 'course */
  background-color: rgba(26,26,26,1);
}
#left-bar {
  max-width: 100%;
  max-height: 100%; /* Prevents it from auto sizing to its content */
  position:absolute;
  right: -20px; /* Shifts element to the right */
  padding-right: 10px; /* Uses padding to move element back into position */
  overflow-y: scroll; /* Makes sure that there is a scrollbar */
}

Demo Here