Geek Answers Handbook

Visible Overflow Scrolling

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

I need the overflow to be displayed, but at the same time I can scroll it from 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 saw this: How to combine overflow: visible and overflow: scroll in CSS?

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

EDIT:

This code decides to reject the scroll. I still cannot show an overflow of content on the screen. Is 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; }
+4
source share
3 answers

For anyone looking for this. I wrote 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 how it works here: https://jsfiddle.net/casas111/d32m7603/5/

+1
source

According to your comment, since you want to hide the scrollbar of the div. I apply a simple css trick.

I have a hidden scroll pane, decreasing the width of the parent container of this dive and applying overflow:hidden to this div.

Verified with google-chrome , firefox and internet-explorer-11 works fine.

For reference Hide scrollbar, but you can still 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>
+1
source

Your code is so good, only a small correction is needed, 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>
0
source

More articles:


All Articles