css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <h1>JS-ScrollBar</h1>
<p id="LoremIpsum">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel semper mauris. Donec ut convallis diam, quis vehicula tellus. Curabitur sed felis nec neque suscipit dapibus eu sit amet metus. Nulla neque mi, tincidunt non eros at, euismod semper purus. Sed egestas ullamcorper sapien, eget rutrum lacus vehicula sed. Suspendisse scelerisque eleifend bibendum. Nulla facilisi. Nullam viverra volutpat magna, sed blandit metus consequat tristique. Pellentesque tristique elementum justo, at dapibus lectus cursus eget. Integer viverra, lectus at sodales vestibulum, odio dui hendrerit mi, luctus tristique nisl velit at lectus. Ut et mauris molestie, tristique ligula ut, ultricies tortor. Aliquam ullamcorper venenatis posuere. Ut id dolor faucibus, porta justo eget, fermentum elit. Vivamus blandit vitae velit vehicula tincidunt. Fusce tristique ut arcu vitae molestie. Aliquam ac eleifend lectus. Mauris viverra massa in dignissim rutrum. Aliquam erat volutpat. Pellentesque ultricies justo eget ante scelerisque, at accumsan ipsum mollis. Nullam volutpat neque eget eros vulputate, ac placerat est condimentum. Sed adipiscing imperdiet sem, eget accumsan ante placerat consequat. Maecenas nec est non turpis mattis tincidunt. Duis id nunc mollis, venenatis enim ac, hendrerit metus. Proin vitae libero vel ligula hendrerit blandit at in risus. Etiam aliquet massa ut facilisis facilisis. Integer lacinia gravida massa, sit amet rutrum massa ultricies nec. Vivamus fermentum, ante nec sagittis aliquam, urna enim hendrerit velit, a rhoncus elit lacus eget ligula. Vivamus volutpat pellentesque ligula, ac facilisis enim pulvinar non. Phasellus eu posuere erat. Curabitur at varius justo, eu accumsan risus. Suspendisse eu eleifend metus, eu egestas orci. Phasellus volutpat justo sed turpis pellentesque, vel tristique leo suscipit. Nulla a odio erat. Donec nunc erat, venenatis ut bibendum in, fringilla consequat neque. Nulla lacus nibh, pretium non ante fermentum, porta tempus tortor. Morbi vel tincidunt odio, nec dictum diam. Pellentesque mollis magna risus, eget suscipit mauris porttitor mollis. Ut tempor tincidunt libero imperdiet consectetur. Praesent nunc ligula, faucibus quis erat eu, commodo volutpat nisl. Sed quis quam commodo, viverra mauris dignissim, dignissim sem. Vestibulum tempus enim id ultrices vehicula. Aenean tempor consectetur massa. Nulla pulvinar leo magna, viverra posuere risus sodales non. Proin volutpat lectus quis convallis ultricies. Vivamus pulvinar dolor velit, a lacinia nibh semper sit amet. Nunc sed nibh id justo dapibus feugiat. Mauris suscipit semper bibendum. Pellentesque aliquet lacus ac lacus aliquam eleifend. Duis sapien neque, aliquam vel feugiat eget, ultricies vitae sapien. Mauris justo odio, commodo vitae aliquam at, interdum non dolor. Donec condimentum ligula eu metus porttitor condimentum. Praesent in rutrum nisl, nec porttitor nunc. In venenatis nisl nunc. Phasellus accumsan cursus ante, in euismod tortor aliquam et. Donec sodales consectetur lectus ac egestas. Donec fermentum rhoncus tincidunt. Integer id diam at purus accumsan condimentum ut ornare sem. Pellentesque sit amet vehicula tortor. Donec in luctus lacus. Mauris ultricies mi ac lorem dignissim convallis. Praesent iaculis nisl adipiscing leo sagittis scelerisque. Aliquam erat volutpat. Morbi euismod bibendum lacus, in auctor ipsum gravida in. Donec adipiscing erat et volutpat faucibus. Nunc orci ipsum, consectetur et pretium vel, dictum nec justo. Ut felis dui, luctus eu euismod eget, commodo quis arcu. Aliquam erat volutpat. Curabitur vitae libero luctus, tincidunt urna id, sodales nunc. Curabitur quis tempor leo. Mauris adipiscing venenatis dui vehicula malesuada. In feugiat felis tortor, vitae porttitor est congue et. Sed laoreet, quam non fermentum aliquet, neque nisl congue elit, quis tincidunt metus sapien vitae sapien.Curabitur aliquet convallis aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed ac quam sagittis, rutrum enim sit amet, cursus massa. Integer tincidunt elit at urna ornare dapibus. Quisque id elit pulvinar, accumsan lacus vel, malesuada sapien. Vivamus non purus venenatis tortor congue tempor et eu odio. Etiam laoreet lacus justo, at viverra sem vulputate et. Duis risus magna, ornare id mi eget, varius rutrum nisi. Integer libero mauris, pretium quis nunc ut, tincidunt sodales purus. Pellentesque id quam vitae turpis semper molestie. Phasellus ligula odio, auctor in mauris a, pretium pellentesque nunc.

In venenatis neque nisl, ac mattis mauris ullamcorper id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eu justo elementum, porta leo vel, semper nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ut adipiscing urna. Cras sit amet suscipit elit. Aenean viverra justo sed sapien porttitor, eget sollicitudin metus viverra. Praesent consectetur lacus a cursus eleifend.

Aenean tempor laoreet ultricies. Praesent egestas mi quis nunc auctor placerat. Aliquam sit amet tempor nibh. Sed commodo sem mauris, a bibendum mi iaculis a. Sed bibendum quam non elit fringilla, eu venenatis enim semper. Curabitur eu vehicula dui, nec scelerisque tortor. Pellentesque pharetra pharetra egestas. Aliquam et justo velit. Vestibulum varius tristique mauris, quis semper lorem sagittis eu. In ac faucibus est. Vivamus tincidunt elit blandit, imperdiet ante sed, luctus ipsum. Suspendisse imperdiet magna ac risus egestas sodales. Cras sollicitudin augue sit amet dapibus semper. Morbi eu nulla eleifend, venenatis augue ac, suscipit neque. Maecenas quis augue eros. Duis massa nunc, pharetra vitae egestas at, lacinia a nisi. In cursus condimentum ligula. Aenean bibendum lacinia viverra. Nam quam nisl, rutrum id diam vitae, semper malesuada tellus. Sed id suscipit leo. Integer congue nunc sed commodo sagittis. Sed ac sodales erat, non eleifend risus. Sed eleifend tristique euismod. In iaculis arcu ac libero viverra, eget tristique sapien sollicitudin. Nullam nisi sapien, luctus vitae mattis in, ullamcorper at tellus. Donec vitae tellus a diam sagittis porta semper at felis. Sed vel magna vitae nisl eleifend varius. Aliquam erat volutpat. Quisque pharetra facilisis ipsum, sed porta tellus pretium vel. Aenean ultrices nec arcu et adipiscing. Vestibulum vulputate pulvinar rhoncus. Quisque ante orci, feugiat eget accumsan ut, ullamcorper sed felis. Quisque eget turpis tellus. Morbi ac sollicitudin justo, vel auctor arcu. Aliquam et justo porta, convallis elit sit amet, adipiscing nisi.
</p>
            
          
!
            
              body {
  background-color:#fff;
  background-image:linear-gradient(to left, transparent 75%, rgba(130,70,70,0.1) 25%);
  background-size:5px 5px;
  background-position:2px 0;
  margin:0;
  padding:0 0 50px 0;
}

h1 {
  font-family:Georgia;
  text-align:center;
  color:rgb(130,70,70);
  font-size:40px;
  font-weight:normal;
  font-style:italic;
}

#LoremIpsum {
  background:rgba(255,255,255,0.6);
  width:830px;
  margin:0 auto;
  padding:30px 35px;
  box-shadow:0 1px 3px rgba(0,0,0,0.4);
  font-family:Georgia;
  font-size:13px;
  font-style:italic;
  color:rgb(150,110,110);
  text-align:justify;
  line-height:23px;
}
            
          
!
            
              document.body.style.margin='0';
document.body.style.overflow='hidden';
document.body.insertAdjacentHTML('afterBegin','<div id="scrollBar" style="background:rgba(0,0,0,0.8);width:7px;height:0;top:0;left:100%;margin:2px 0 0 -9px;border-radius:7px;position:absolute;"></div>');
document.getElementById('scrollBar').style.webkitTransition='margin 0.1s, width 0.1s';
document.getElementById('scrollBar').style.mozTransition='margin 0.1s, width 0.1s';
document.getElementById('scrollBar').style.msTransition='margin 0.1s, width 0.1s';
document.getElementById('scrollBar').style.oTransition='margin 0.1s, width 0.1s';
document.getElementById('scrollBar').style.Transition='margin 0.1s, width 0.1s';
document.getElementById('scrollBar').onmouseover=function(){document.getElementById('scrollBar').style.width='10px';document.getElementById('scrollBar').style.margin='2px 0 0 -12px';};
document.getElementById('scrollBar').onmouseout=function(){document.getElementById('scrollBar').style.width='7px';document.getElementById('scrollBar').style.margin='2px 0 0 -9px';};
function scrollBarAdjust() {
	var scrollBarHeight=(window.innerHeight-3)/document.body.offsetHeight*window.innerHeight;
	var scrollBarPosition=(window.innerHeight-3)/document.body.offsetHeight*-parseInt(document.body.style.marginTop);
	document.getElementById('scrollBar').style.height=scrollBarHeight+'px';
	document.getElementById('scrollBar').style.top=scrollBarPosition+'px';
}
scrollBarAdjust();
document.onmousewheel=function(event) {
	var direction=event.detail ? event.detail*(-120) : event.wheelDelta;
	var scroll=parseInt(document.body.style.marginTop)+direction;
	if(scroll>0)
		document.body.style.margin='0';
	else if(scroll<-document.body.offsetHeight+window.innerHeight)
		document.body.style.margin=(-document.body.offsetHeight+window.innerHeight)+'px 0 0 0';
	else
		document.body.style.margin=scroll+'px 0 0 0';
	scrollBarAdjust();
}
document.getElementById('scrollBar').onmousedown=function(event) {
  event.preventDefault();
  scrollBarOnmouseout=this.onmouseout;
  this.onmouseout=null;
  init={position:event.clientY,scroll:parseInt(document.body.style.marginTop)};
  window.onmousemove=function(event) {
    scroll=-(init.scroll+(event.clientY-init.position)*(document.body.offsetHeight/window.innerHeight));
    console.log(scroll);
    if(scroll>0)
      document.body.style.margin='0';
    else if(scroll<-document.body.offsetHeight+window.innerHeight)
  		document.body.style.margin=(-document.body.offsetHeight+window.innerHeight)+'px 0 0 0';
    else
      document.body.style.margin=scroll+'px 0 0 0';
    scrollBarAdjust();
  }
  window.onmouseup=function() {
    document.getElementById('scrollBar').onmouseout=scrollBarOnmouseout;
    window.onmousemove=null;
  }
}
window.onresize=scrollBarAdjust;
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console