Scroll with overflow visible

Question

Link: https://jsfiddle.net/casas111/d32m7603/2/

I need the overflow to be visible but at the same time to be able to scroll it from inside the div.

jsfiddle code:

html:

<div class="screen">
<p class="content">Pellentesque habitant morbi
  tristique senectus et netus
  et malesuada fames ac turpis
  egestas. Vestibulum tortor quam,
  feugiat vitae, ultricies eget,
  tempor sit amet, ante. Donec eu
  libero sit amet quam egestas semper.
  Aenean ultricies mi vitae est. Mauris
  placerat eleifend leo. Aenean ultricies
  mi vitae est. Mauris placerat eleifend leo
  Pellentesque habitant morbi
    tristique senectus et netus
    et malesuada fames ac turpis
    egestas. Vestibulum tortor quam,
    feugiat vitae, ultricies eget,
    tempor sit amet, ante. Donec eu
    libero sit amet quam egestas semper.
    Aenean ultricies mi vitae est. Mauris
    placerat eleifend leo. Aenean ultricies
    mi vitae est. Mauris placerat eleifend leo
    Pellentesque habitant morbi
      tristique senectus et netus
      et malesuada fames ac turpis
      egestas. Vestibulum tortor quam,
      feugiat vitae, ultricies eget,
      tempor sit amet, ante. Donec eu
      libero sit amet quam egestas semper.
      Aenean ultricies mi vitae est. Mauris
      placerat eleifend leo. Aenean ultricies
      mi vitae est. Mauris placerat eleifend leo
</p>
</div>

CSS

.screen {
    border-style: solid;
    width: 200px;
    height: 300px;
    margin-left: 30%;
    margin-top: 20%;
    overflow: auto;
}

I have seen this: How to combine overflow:visible and overflow:scroll in CSS?

But there is no clear answer. text-indent is for the horizontal case. This is a simple vertical case.

EDIT:

This code solves hidding the scroll. I'm still not able to show the overflow of content ouside the screen. Anyone?

.screen {
  margin-left: 30%;
  margin-top: 20%;
  width: 190px;
  overflow: hidden;
  height: 100%;
  border: 2px solid #000;
 }
 .content {
   width: 200px;
   height: 300px;
   padding: 5px 10px 5px 5px;
   overflow: auto;
 }
 .screen::-webkit-scrollbar {
   display: none;
 }

possible duplicate of [How to combine overflow:visible and overflow:scroll in CSS?](http://stackoverflow.com/questions/24230472/how-to-combine-overflowvisible-and-overflowscroll-in-css) — klaar, Aug 03 '15 at 11:55
@eirenaios yes if possible. Although initially I just need it to work like that. — Alejandro, Aug 03 '15 at 13:51

score 2 · Accepted Answer · answered Aug 04 '15 at 01:34

For everyone looking for this. I wrote a simple JQuery code that does the trick! Enjoy

<html>
<head>
  <script src="js/jquery-2.1.4.min.js"></script>
  <style>
  .screen,
  .content{
    top:200px;
    left:200px;
    width: 190px;
    height: 300px;
    position: absolute;
  }
  .screen {
    border: 2px solid #000;
    z-index: 10;
    }
  </style>
  <script type="text/javascript">
    $(function(){
      $('.screen').bind('mousewheel', function(e){
          if(e.originalEvent.wheelDelta /120 > 0) {
              console.log($( ".content" ).position().top);
              $( ".content" ).css( "top", $( ".content" ).position().top+=5     );
          }
          else{
              $( ".content" ).css( "top", $( ".content" ).position().top-=5 );
          }
      });
  });
  </script>
</head>
<body>
  <div class="screen">

  </div>
  <div class="content">Pellentesque habitant morbi
    tristique senectus et netus
    et malesuada fames ac turpis
    egestas. Vestibulum tortor quam,
    feugiat vitae, ultricies eget,
    tempor sit amet, ante. Donec eu
    libero sit amet quam egestas semper.
    Aenean ultricies mi vitae est. Mauris
    placerat eleifend leo. Aenean ultricies
    mi vitae est. Mauris placerat eleifend leo
    Pellentesque habitant morbi
  tristique senectus et netus
  et malesuada fames ac turpis
  egestas. Vestibulum tortor quam,
  feugiat vitae, ultricies eget,
  tempor sit amet, ante. Donec eu
  libero sit amet quam egestas semper.
  Aenean ultricies mi vitae est. Mauris
  placerat eleifend leo. Aenean ultricies
  mi vitae est. Mauris placerat eleifend leo
  Pellentesque habitant morbi
    tristique senectus et netus
    et malesuada fames ac turpis
    egestas. Vestibulum tortor quam,
    feugiat vitae, ultricies eget,
    tempor sit amet, ante. Donec eu
    libero sit amet quam egestas semper.
    Aenean ultricies mi vitae est. Mauris
    placerat eleifend leo. Aenean ultricies
    mi vitae est. Mauris placerat eleifend leo
  </div>
</body>
</html>

You can see it working here: https://jsfiddle.net/casas111/d32m7603/5/

score 1 · Answer 2 · edited May 23 '17 at 10:27

As per your comment as u want to hide scrollbar of div. I have applies simple css trick.

I have hidden scrollbar area by taking smaller width of parent container of that dive and applied overflow:hidden for that div.

Checked with google-chrome, firefox and internet-explorer-11 Working just fine.

For reference Hide scroll bar, but still being able to scroll

.screen {
  margin-left: 30%;
  margin-top: 20%;
  width: 190px;
  overflow: hidden;
  height: 100%;
  border: 2px solid #000;
}
.content {
  width: 200px;
  height: 300px;
  padding: 5px 10px 5px 5px;
  overflow: auto;
}
.screen::-webkit-scrollbar {
  display: none;
}

<div class="screen">
  <p class="content">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Aenean ultricies mi vitae est. Mauris placerat eleifend leo Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit
    amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Aenean ultricies mi vitae est. Mauris placerat eleifend leo Pellentesque habitant morbi tristique senectus et netus et malesuada
    fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Aenean ultricies mi vitae est. Mauris
    placerat eleifend leo
  </p>
</div>

Close, but not there. I need to be able to see the content overflow. I will test from your code and come back. Thank you — Alejandro, Aug 03 '15 at 14:50

Hari Om Srivastava · Answer 3 · 2015-11-21T07:42:30.443

Your code are so good , only need a little correction which is given below

    <style>
     .content {
       width: 168px;
       height: 300px;
       padding: 5px 10px 5px 5px;
     }
     .content:hover{ overflow-x:scroll;}
    </style>


And full code are given below have a look

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.screen {
  margin-left: 30%;
  margin-top: 20%;
  width: 190px;
  overflow: hidden;
  height: 100%;
  border: 2px solid #000;
 }
 .content {
   width: 168px;
   height: 300px;
   padding: 5px 10px 5px 5px;
 }
 .screen::-webkit-scrollbar {
   display: none;
 }
 .content:hover{ overflow-x:scroll;}
</style>
</head>

<body>
<div class="screen">
<p class="content">Pellentesque habitant morbi
  tristique senectus et netus
  et malesuada fames ac turpis
  egestas. Vestibulum tortor quam,
  feugiat vitae, ultricies eget,
  tempor sit amet, ante. Donec eu
  libero sit amet quam egestas semper.
  Aenean ultricies mi vitae est. Mauris
  placerat eleifend leo. Aenean ultricies
  mi vitae est. Mauris placerat eleifend leo
  Pellentesque habitant morbi
    tristique senectus et netus
    et malesuada fames ac turpis
    egestas. Vestibulum tortor quam,
    feugiat vitae, ultricies eget,
    tempor sit amet, ante. Donec eu
    libero sit amet quam egestas semper.
    Aenean ultricies mi vitae est. Mauris
    placerat eleifend leo. Aenean ultricies
    mi vitae est. Mauris placerat eleifend leo
    Pellentesque habitant morbi
      tristique senectus et netus
      et malesuada fames ac turpis
      egestas. Vestibulum tortor quam,
      feugiat vitae, ultricies eget,
      tempor sit amet, ante. Donec eu
      libero sit amet quam egestas semper.
      Aenean ultricies mi vitae est. Mauris
      placerat eleifend leo. Aenean ultricies
      mi vitae est. Mauris placerat eleifend leo
</p>
</div>
</body>
</html>

didn't solve my problem. I need to see the overflow while I scroll. Also, when I stop the hover it re arranges to the initial state again. — Alejandro, Aug 03 '15 at 12:09

Scroll with overflow visible

3 Answers3