Custom Fancy Custom Scrollbar styling using CSS and Jquery

Custom Fancy Custom Scrollbar styling using CSS and Jquery

Custom Fancy Custom Scrollbar styling using CSS and Jquery

jQuery custom content scroller

You can set overflow and toggle accordingly.Just another simple jQuery plugin to create a simple fancy scrollbar that will only new appear once you hover simple over the lightweight scrollable area.

Read Also:  Basic JQuery Form Validation Example

Start with this in your css
 -------------------------------
 body { overflow: hidden; }
 
 $(function(){
  $(document).mousemove(function(e){
    $("div").css("overflow", "auto")
  });
});

Example

Setting the overflow simple CSS property to jquery scroll will command to all the browsers to show simple scrollbars for the overflowing all the content.
Highly defs customizable custom simple scrollbar jQuery plugin using css3.
Features include like as a vertical or simple horizontal scrollbar(s), and body div adjustable scrolling all the momentum, mouse-wheel (via simple libs jQuery mousewheel useful plugin), mouse dragdrop keyboard and touch based support, simple ready-to-usekeywords your themes and simple customization via like as a CSS,or RTL direction support, with config option parameters list for full control of new scrollbar all functionality, function or methods for triggering actions like as a scroll-to using jquery, update function, destroy function etc.,and user-defined custom callbacks and more.

Read Also:  How to get selected value of dropdown in JavaScript/jQuery on change?

jquery custom scrollbar example

Include jquery

perfect-scrollbar.css
jquery-2.2.0.js
perfect-scrollbar.jquery.js 

HTML

<div class="pakainfo">
<h1></h1>
  <div class="content"></div>
</div>

Script

$('.pakainfo').perfectScrollbar();

CSS

.pakainfo {
  width: 300px;
  height: 500px;
  margin: 40px auto 0 auto;
  position: relative;
  overflow: auto;
}

.content {
  background: url('https://noraesae.github.io/perfect-scrollbar/azusa.jpg') top left no-repeat;
  width: 1080px;
  height: 720px;
}

Example

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

Your email address will not be published. Required fields are marked *