How can I create a simple page vertical scroll bar without using jQuery

0 votes
I have looked at I think all the scrollbars code but have not yet been able to find a simple one that does not use jQuery or a somewhat complex library.

Has anyone created there own simple scrollbar using just Javascript? What I am looking for is an example of how this can be done.
Jun 22, 2022 in Web Development by gaurav
• 23,260 points
547 views

1 answer to this question.

0 votes

Surprisingly, there is not a great, simple solution out there using vanilla JavaScript. I made a pure JS lightweight, minimal cross browser solution. Adjust to your own needs and aesthetics

*Update 2019
The W3C has a working document that is on standards track to improve this out of the box through the css specification. Although limiting, if you want to use cutting edge css you can now style your scroll bars through the scrollbar-color and scrollbar-width. For more information please check https://drafts.csswg.org/css-scrollbars/

Examples:
Here is the fiddle and CodePen

HTML

<body>
    <div id="main" class="scrollable">
        <div class="content-wrapper">
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt accusamus maxime voluptatem quasi. Recusandae optio nobis ratione iste consectetur consequatur cupiditate saepe laborum natus neque a provident eum explicabo delectus qui accusantium nostrum reiciendis soluta hic ut at sed laboriosam possimus repudiandae deserunt velit rerum. Aliquam ratione itaque corrupti aperiam quisquam unde aspernatur odio id repellendus corporis eaque expedita in ab minus possimus! Quo tempore consequatur repellat consectetur nemo molestiae perferendis ipsum esse nesciunt blanditiis nobis dicta? Laudantium quaerat inventore deleniti exercitationem explicabo quos pariatur sunt earum labore sed eius blanditiis architecto consequuntur ad consectetur unde sapiente nisi. Sunt eos.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt accusamus maxime voluptatem quasi. Recusandae optio nobis ratione iste consectetur consequatur cupiditate saepe laborum natus neque a provident eum explicabo delectus qui accusantium nostrum reiciendis soluta hic ut at sed laboriosam possimus repudiandae deserunt velit rerum. Aliquam ratione itaque corrupti aperiam quisquam unde aspernatur odio id repellendus corporis eaque expedita in ab minus possimus! Quo tempore consequatur repellat consectetur nemo molestiae perferendis ipsum esse nesciunt blanditiis nobis dicta? Laudantium quaerat inventore deleniti exercitationem explicabo quos pariatur sunt earum labore sed eius blanditiis architecto consequuntur ad consectetur unde sapiente nisi. Sunt eos.</p>
            </div>
        </div>
    </div>
    <div>Not special and not contained within scrolling</div>
</body>
answered Jun 22, 2022 by rajatha
• 7,680 points

Related Questions In Web Development

0 votes
0 answers

How can I create a "Please Wait, Loading..." animation using jQuery?

I would like to place a "please ...READ MORE

Aug 11, 2022 in Web Development by gaurav
• 23,260 points
384 views
0 votes
0 answers

How can I create a "Please Wait, Loading..." animation using jQuery?

I would like to place a "please ...READ MORE

Aug 12, 2022 in Web Development by gaurav
• 23,260 points
884 views
0 votes
0 answers

How Can I create A 5 second Countdown timer with jquery that ends with a login popup?

How would i create a jquery timer ...READ MORE

Jul 28, 2022 in Web Development by gaurav
• 23,260 points
618 views
0 votes
0 answers

how can i get the url of the content( home.html) in adress bar by jquery load() function?

I am using jquery load() function to ...READ MORE

Jul 28, 2022 in Web Development by gaurav
• 23,260 points
612 views
0 votes
1 answer
0 votes
0 answers

Anyone can help me out to understand the semantic of (document.getElementBYId("demo").innerHTML="Hello") ?

Hello guys, Can Someone helps me to find ...READ MORE

Jan 17, 2020 in Web Development by anonymous
• 37,520 points
950 views
+1 vote
1 answer

What is the relationship between angularjs Scope with controller/view?

Let us consider the below block: <div ng-controller="emp"> ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,840 points

edited Jan 21, 2020 by Niroj 1,181 views
+1 vote
1 answer

What are pseudo class in css??

Hey, The state of an element is controlled  by ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,840 points

edited Jan 21, 2020 by Niroj 919 views
0 votes
1 answer

How to create a simple map using JavaScript/JQuery

var map = new Object(); // or ...READ MORE

answered Jun 27, 2022 in Web Development by rajatha
• 7,680 points
1,365 views
0 votes
1 answer

Adding a page loader using jQuery

“html loader using jquery” Code Answer $('body'). append('<div ...READ MORE

answered Jun 27, 2022 in Web Development by rajatha
• 7,680 points
1,065 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP