Thursday, 28 July 2016

Custom Scrollbar Using Javascript and CSS

Today we will create custom stylized scrollbars for our website. We will use pure javascript to build own scrollbar. So this will really cross browser solution. We can use keys Up/Down keyboard keys to scroll content, mouse roller, drag and drop of scroller, etc

Download File 

HTML & CSS

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
   #slider{
      height: 500px;
      width: 600px;
      overflow: hidden;
      margin-top: 60px;
   }
   #slider1 {
      height: 100px;
      width: 600px;
      overflow: hidden;
      margin-top: 60px;
   }
   #innerDiv{
      transition: top 0.5s;
      -webkit-transition: top 0.1s;
      border: none;
      
   }
   .slidebt{
      background: #083EAA;
      color: #fff;
   }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="slider.js" type="text/javascript"></script>
<script>
 $(document).ready(function(e) {
    $("#slider").autoSlide();
    $("#slider1").autoSlide();
});
</script>
</head>

<body>
<div id="slider">
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
</div>
<div id="slider1">
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
</div>
</body>
</html>



Javascript: slider.js

// JavaScript Document
(function ( $ ) {
    $.fn.autoSlide = function() {
            var parent = $(this);
            var id = $(this).attr("id");
            var content = $(this).html();
            var curPos = 0;
            var downTimeStart = null;
            var eventStart = null;
            $(this).empty();
            $(this).css("position","relative");
            var slideInDiv = $('<div/>',{html:content,id:"innerDiv",style:'position:relative;top:0px;width:'+($(parent).width()-34)+'px'});
            var limitScrool = parseInt($(parent).height()) - parseInt($(slideInDiv).height());
           
            var btUp = $('<button/>', {html: '&utrif;',id: id+'_btn_up',class:'slidebt',style:'position:absolute;right:0;top:1px;width:30px; height:'+(($(parent).height()/2)-2)+'px',
                click: function () {
                 upEvent();
                 },
                 mousedown: function(){
                     downTimeStart = setTimeout(function(){
                         eventStart = setInterval(function(){
                              upEvent();
                         },70)
                     },500);
                 },
                 mouseup : function(){
                    clearInterval(eventStart);
                    clearTimeout(downTimeStart);
                 }
            });
            var btDown = $('<button/>', {html: '&dtrif;',id: id+'_btn_down',class:'slidebt',style:'position:absolute;right:0;bottom:1px;width:30px;height:'+(($(parent).height()/2)-2)+'px',
                click: function () {
                   downEvent();
                 },
                 mousedown: function(){
                     downTimeStart = setTimeout(function(){
                         eventStart = setInterval(function(){
                              downEvent();
                         },100)
                     },500);
                 },
                 mouseup : function(){
                    clearInterval(eventStart);
                    clearTimeout(downTimeStart);
                 }
            });
            $(this).append(slideInDiv);
            $(this).append(btUp);
            $(this).append(btDown);
            var downEvent = function(){
                console.log(curPos);
                if(curPos < parseInt($(slideInDiv).height())-parseInt($(parent).height())){
                      curPos = curPos+50;
                      $(slideInDiv).css("top",-curPos+'px');
                      $(btUp).prop("disabled",false);
                }else{
                    $(btDown).prop("disabled",true);
                    clearInterval(eventStart);
                    clearTimeout(downTimeStart);
                }
            }
            var upEvent = function(){
                console.log(curPos);
                if(curPos > 1){
                      curPos = curPos-50;
                      $(slideInDiv).css("top",-curPos+'px');
                      $(btDown).prop("disabled",false);
                }else{
                    $(btUp).prop("disabled",true);
                    clearInterval(eventStart);
                    clearTimeout(downTimeStart);
                }
            }
            var onsliderLoad = function(){
                if(parseInt($(slideInDiv).css("top")) < 1){
                    $(btUp).prop("disabled",true);
                }
                if(parseInt($(slideInDiv).height()) <= parseInt($(parent).height())){
                    $(btDown).prop("disabled",true);
                }
                console.log($(slideInDiv).height());
            }
            onsliderLoad();
    };

}( jQuery ));

 


1 comment:

  1. I just see the post i am so happy the post of information's.So I have really enjoyed and reading your blogs for these posts.Any way I’ll be subscribing to your feed and I hope you post again soon.
    best selenium training institute in hyderabad
    best selenium online training institute in hyderabad
    best institute for selenium training in hyderabad
    best selenium training institute in hyderabad

    ReplyDelete