Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <link href="https://fonts.googleapis.com/css?family=Cookie|Pacifico" rel="stylesheet"/>
<div id="wrapper">
  <div class="scrolls">
    <div class="custom-scroll custom-scroll-2">
      <h1>Custom Style 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris augue diam, scelerisque sed faucibus at, aliquet sed diam. Pellentesque egestas pellentesque tortor in lacinia. Morbi quis rhoncus orci, ac faucibus tortor. Nulla facilisi. Praesent
        sollicitudin fringilla feugiat. Etiam justo erat, faucibus nec eleifend sed, ullamcorper eu nulla. Donec sed sapien hendrerit, volutpat augue eget, ullamcorper libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Vestibulum nec congue ante. Nam quis massa sit amet arcu sollicitudin aliquet vel sed sem.</p>
      <img src="https://unsplash.it/300?image=12" alt="image" />
      <p>Sed eget mollis ipsum, a luctus massa. Curabitur scelerisque non lorem nec mollis. Nam vulputate arcu eget ultrices posuere. Donec id fermentum enim. Nulla vel cursus mi, at mollis lacus. Donec ultricies pretium neque non malesuada. Quisque eget
        diam libero. Fusce tempus, turpis et imperdiet hendrerit, quam sapien volutpat sem, ac viverra sapien justo vel tellus. Donec non augue cursus, porttitor libero et, varius odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
        ridiculus mus. Etiam congue id risus id aliquet. Phasellus sit amet pharetra felis, ac porta est.</p>
      <img src="https://unsplash.it/300?image=50" alt="image" />
      <p>Aliquam erat volutpat. Phasellus euismod, eros a convallis blandit, sem turpis volutpat libero, eu vulputate dui libero sed ante. Mauris sed nisl nisl. Suspendisse potenti. Nulla purus arcu, bibendum eu ipsum in, viverra pellentesque purus. Donec
        luctus purus vel nibh commodo laoreet volutpat vitae leo. Pellentesque hendrerit massa vel massa dignissim hendrerit. Quisque accumsan ultricies lorem, ac efficitur urna finibus nec. Nulla pharetra nisi tortor, fermentum pulvinar justo posuere
        nec. Vivamus in enim vel neque luctus condimentum sed imperdiet massa. In hac habitasse platea dictumst.</p>
      <img src="https://unsplash.it/300?image=34" alt="image" />
      <p>Integer mauris elit, pellentesque et purus dictum, convallis ullamcorper massa. Vivamus sed felis sit amet lectus malesuada facilisis. Pellentesque aliquam felis lorem, sit amet vestibulum leo tristique vitae. Quisque pharetra turpis eu erat pellentesque
        lobortis nec nec est. Quisque ac nulla bibendum, feugiat lacus sit amet, elementum nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc purus leo, sodales a viverra vitae, pellentesque vel enim. Phasellus
        dapibus nisi quis fringilla volutpat. Curabitur sed mauris sed mauris eleifend vulputate. Pellentesque nunc massa, pulvinar id sodales ut, dignissim ut lectus. In rutrum, massa non porta consequat, ipsum eros pharetra libero, a faucibus leo risus
        nec nulla. In pellentesque ut augue non tristique.</p>
      <img src="https://unsplash.it/300?image=68" alt="image" />
      <p>Ut mattis, magna sed mattis tristique, ex nunc lacinia elit, non aliquet nisi ante at nulla. Aliquam erat volutpat. Nullam lobortis est nec nunc malesuada, eget vulputate ex consectetur. Vestibulum varius mollis dapibus. In congue scelerisque velit,
        vitae rutrum purus sagittis vitae. Fusce id tristique nibh, in efficitur odio. Aenean ac augue quis lectus hendrerit pharetra. Vestibulum gravida massa libero, quis lobortis leo sollicitudin in. Donec vestibulum eleifend enim nec mattis. Sed ut
        sodales ligula, sed congue ligula. Mauris porta efficitur est ut porta. Sed pulvinar odio ut tempor bibendum.</p>
    </div>
  </div>
</div>
              
            
!

CSS

              
                * {
  margin: 0;
  padding: 0;
}
html, body, #wrapper {
  height: 100%;
}
body {
  background: #121720;
  background: url("https://cdn.rawgit.com/akzhy/scrollbot/f7a3ae4d/demo/files/bg.png");
  font-family: "Cookie", cursive;
  text-align: center;
}

h1, h2, h3 {
  font-family: "Pacifico", cursive;
  font-weight: bold;
  position: relative;
}

h1:after, h2:after, h3:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  background: #202020;
  bottom: 0;
  left: 0;
}

a {
  text-decoration: none;
  color: #2196f3;
}

p {
  font-size: 1.5em;
  margin: 10px 0;
  line-height: 1.3em;
}

.scrolls {
  padding: 20px;
}

.title {
  font-size: 3em;
  text-align: left;
  padding: 5px 20px;
}

.title a {
  color: #f44336;
}

.custom-scroll {
  width: 500px;
  height: 500px;
  padding: 20px;
  text-align: left;
  background: #fff;
  margin: 25px;
  display: inline-block;
  overflow: auto;
}

.custom-scroll img {
  width: 100%;
}

.btn {
  display: inline-block;
  padding: 10px;
  border: 1px solid #333;
  font-size: 2em;
  margin: 1em;
  cursor: pointer;
}

              
            
!

JS

              
                custom2 = new scrollbot(".custom-scroll-2",10).setStyle({
			"background":"#202020",
			"z-index":"2"
		},{
			"background":"rgba(0,0,0,0)"
		});
		var psuedo = document.createElement("div");
		psuedo.style.cssText = "height:100%;width:2px;left:4px;background:#808080;position:absolute;z-index:1";
		custom2.scrollBarHolder.appendChild(psuedo);
		

		document.onreadystatechange = function(){
			custom2.refresh();
		}
              
            
!
999px

Console