Js-ScrollBar

Developer
Julien Dargelos
Size
5,045 Kb
Views
12,144
  1. Js-ScrollBar Previews
  2. Js-ScrollBar HTML Codes
  3. Js-ScrollBar CSS Codes
  4. Js-ScrollBar JS Codes

How do I make an js-scrollbar?

What is a js-scrollbar? How do you make a js-scrollbar? This script and codes were developed by Julien Dargelos on 28 November 2022, Monday.

Js-ScrollBar Previews
IQ Test

Js-ScrollBar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Js-ScrollBar</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ 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;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <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> <script src="js/index.js"></script>
</body>
</html>

Js-ScrollBar - Script Codes CSS Codes

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

Js-ScrollBar - Script Codes JS Codes

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();
}
window.onresize=scrollBarAdjust;
Js-ScrollBar - Script Codes
Js-ScrollBar - Script Codes
Home Page Home
Developer Julien Dargelos
Username juliendargelos
Uploaded November 28, 2022
Rating 3.5
Size 5,045 Kb
Views 12,144
Do you need developer help for Js-ScrollBar?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Julien Dargelos (juliendargelos) Script Codes
Name
SmartPass
Pure CSS Torch Light
Tags Input
A Pen by Julien Dargelos
Psychedelic Animation
Calculator
InfoGrid
Watch
Grapher
Vusic
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!