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: