Reputation: 1159

Scroll with overflow visible

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

Upvotes: 4

Answers (3)

Hari Om Srivastava

Reputation: 346

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>

Upvotes: 0

Alejandro

Reputation: 1159

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/

Upvotes: 2

Suresh Karia

Reputation: 18238

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>

Upvotes: 1

Scroll with overflow visible

Answers (3)

Related Questions