Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script class="jsbin" src="http://github.com/brandonaaron/jquery-mousewheel/raw/master/jquery.mousewheel.js" ></script>
  
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  div.container {
  overflow:hidden;
  width:200px;
​
    zoom: 1;  /* IE7 Fix - doesnt work */
  }
  div.content {
    position:relative;
    top:0;
      height:200px;
    left: 70px; /*this is for demo - it cuts off the text */
    zoom: 1; /* IE7 Fix - doesnt work */
  }
  .up, .dn{
      border:1px solid orange;
    cursor: pointer;
  }
  .up:hover, .dn:hover{
      background-color:yellow;
  }
</style>
</head>
<body>
<div class="container">
  <p>
    <span class="up">Up</span> &nbsp; 
    <span class="dn">Down</span>
  </p>
  <div class="content">Top
    <p>Here is the text that need to be scrolled<p>
      <p style="color:green">Lorem  ipsum  dolor sit amet,.</p>
      <p style="color:orange">
        Dolore magna  aliquam  erat volutpat. </p>
​
Suscipit  lobortis  nisl ut aliquip ex ea commodo consequat. Duis autem vel eum  iriure  dolor in hendrerit in vulputate velit esse molestie consequat,  vel  illum dolore eu feugiat nulla f
</p>
      Bottom
  </div>
      <div class="content2" style="display:none;">
    <p>Here is the text that need to be scrolled<p>
      <p style="color:green">Lorem  ipsum  dolor sit amet, consectetuer adipiscing elit, sed diam nonummy  nibh  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  Ut  wisi enim ad minim veniam, quis nostrud exerci tation  ullamcorper  suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Duis autem  vel eum iriure dolor in hendrerit in vulputate velit esse  molestie  consequat, vel illum dolore eu feugiat nulla facilisis at vero  eros et  accumsan et iusto odio dignissim qui blandit praesent luptatum  zzril  delenit augue.</p>
      <p style="color:orange">
        Dolore magna  aliquam  erat volutpat. Ut wisi enim ad minim veniam, quis nostrud  exerci tation  ullamcorper suscipit lobortis nisl ut aliquip ex ea  commodo consequat.  Duis autem vel eum iriure dolor in hendrerit in  vulputate velit esse  molestie consequat, vel illum dolore eu feugiat  nulla facilisis.</p>
​
Suscipit  lobortis  nisl ut aliquip ex ea commodo consequat. Duis autem vel eum  iriure  dolor in hendrerit in vulputate velit esse molestie consequat,  vel  illum dolore eu feugiat nulla facilisis at vero eros et accumsan  et  iusto odio dignissim qui blandit praesent luptatum zzril delenit  augue  duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit  amet,  consectetuer adipiscing elit, sed diam nonummy nibh euismod  tincidunt ut  laoreet dolore magna.
​
Dolore  magna  aliquam erat volutpat. Ut wisi enim ad minim veniam, quis  nostrud  exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex  ea  commodo consequat. Duis autem vel eum iriure dolor in hendrerit  in  vulputate velit esse molestie consequat, vel illum dolore eu  feugiat  nulla facilisis at vero eros et accumsan et iusto odio  dignissim qui  blandit praesent luptatum zzril delenit augue duis dolore  te feugait  nulla facilisi. Lorem ipsum dolor sit amet, consectetuer  adipiscing  elit, sed diam nonummy nibh.
​
Exerci  tation  ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo  consequat.  Duis autem vel eum iriure dolor in hendrerit in vulputate  velit esse  molestie consequat, vel illum dolore eu feugiat nulla  facilisis at vero  eros et accumsan et iusto odio dignissim qui blandit  praesent luptatum  zzril delenit augue duis dolore te feugait nulla  facilisi. Lorem ipsum  dolor sit amet, consectetuer adipiscing elit, sed  diam nonummy nibh  euismod tincidunt ut laoreet dolore magna aliquam erat  volutpat. Ut  wisi enim ad minim veniam.
​
Ea  commodo  consequat. Duis autem vel eum iriure dolor in hendrerit in  vulputate  velit esse molestie consequat, vel illum dolore eu feugiat  nulla  facilisis at vero eros et accumsan et iusto odio dignissim qui  blandit  praesent luptatum zzril delenit augue duis dolore te feugait  nulla  facilisi. Lorem ipsum dolor sit amet, consectetuer.
​
Ullamcorper  suscipit  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem  vel eum  iriure dolor in hendrerit in vulputate velit esse molestie  consequat,  vel illum dolore eu feugiat nulla facilisis at vero eros et  accumsan et  iusto odio dignissim qui blandit praesent luptatum zzril  delenit augue  duis dolore te feugait nulla facilisi. Lorem ipsum.</p>
  </div>
</div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers