Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Nov 2007
    Posts
    680
    Thanks
    319
    Thanked 1 Time in 1 Post

    custom scroll bar

    Ive searched Google and can only find code to download, I need a tutorial on creating a custom scrollbar. Only needs to show the basics of how you would go about coding one, like how to move the content up/down and track the scroller.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,495
    Thanks
    3
    Thanked 500 Times in 487 Posts
    I have commented a basic custom scroll bar script

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    #demo1 {
     position:relative;width:300px; height:250px; padding:8px; background:lightyellow; border:1px solid gray; resize:both; overflow:scroll
    }
    
    .content {
     padding-Right:20px;
    }
    
    #slide {
     position:absolute;left:300px;top:10px;width:10px;height:50px;background-Color:red;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <div id="demo1" style="">
     <div class="content" >
      From Wikipedia- Gunpowder, also known since in the late 19th century as black powder, was the first chemical explosive and the only one known until the mid 1800s.[2] It is a mixture of sulfur, charcoal, and potassium nitrate (saltpeter) - with the sulfur and charcoal acting as fuels, while the saltpeter works as an oxidizer.[3] Because of its burning properties and the amount of heat and gas volume that it generates, gunpowder has been widely used as a propellant in firearms and as a pyrotechnic composition in fireworks. Gunpowder was, according to prevailing academic consensus, discovered in the 9th century in China, attributed to Chinese alchemists searching for an elixir of immortality.[4] This discovery led to the invention of fireworks and the earliest gunpowder weapons in China. In the centuries following the Chinese discovery, gunpowder weapons began appearing in the Arab world, Europe, and India. The consensus is that this was spread from China, through the Middle East, and then into Europe,[5] although there remains some dispute over the amount of Chinese influence on later advancements in gunpowder technology. Gunpowder is classified as a low explosive because of its relatively slow decomposition rate and consequently low brisance. Low explosives deflagrate at subsonic speeds, whereas high explosives detonate, producing a supersonic wave. Ignition of the powder packed behind a bullet must generate enough pressure to force it from the muzzle at high speed, but not enough to rupture the gun barrel. Gunpowder is thus less suitable for shattering rock or fortifications. Gunpowder was widely used to fill artillery shells and in mining and civil engineering to blast rock roughly until the 2nd half of the 19th century, when the first high explosives (nitro-explosives) were discovered. Gunpowder is no longer used in modern explosive military warheads, nor is it used as main explosive in mining operations due to its cost relative to that of newer alternatives like ANFO.
     </div>
     <div id="slide" ></div>
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcCustomScrollBar={
    
     init:function(o){
      var id=o.ParentID,slide=document.getElementById(o.SlideID),obj=document.getElementById(id),scroll=obj?obj.getElementsByTagName('DIV')[0]:null,sz,min,max;
      if (scroll&&slide){
       obj.style.overflow='hidden';
       scroll.style.position='absolute';
       scroll.style.top=scroll.style.left='0px';
       sz=slide.offsetHeight;
       min=slide.offsetTop;
       max=obj.offsetHeight-min-sz;
       o={
        scroll:scroll,                                   // the scroll content DIV.
        slide:slide,                                     // the slide DIV.
        mm:[min,max],                                    // the minimum and maximum scroll positions of the slide DIV.
        maxscroll:-scroll.offsetHeight+obj.offsetHeight, // the maximum scroll distance of the content DIV.
        y:min                                            // the initial positon of the slide DIV.
       };
       this.addevt(slide,'mousedown','down',o);     // mouse down to register the current y position and enable drag
       this.addevt(document,'mousemove','move',o);  // mouse move to register the current y position and calulate the diffence between the last mouse position
       this.addevt(document,'mouseup','up',o);      // mouse to disable drag
      }
     },
    
     down:function(e,o){
      this.y=e.clientY; // last y
      o.drag=true;
      return this.rtn(e)
     },
    
     move:function(e,o){
      if (o.drag){
      //                     y + current y - last y
       o.y=Math.min(Math.max(o.y+e.clientY-this.y,o.mm[0]),o.mm[1]); // limit o.y to the the minimum and maximum scroll positions
       o.slide.style.top=o.y+'px';
    //                                current y-min/maximum y
       o.scroll.style.top=o.maxscroll*(o.y-o.mm[0])/(o.mm[1]-o.mm[0])+'px';
       this.y=e.clientY;  // make last y the current y
       return this.rtn(e)
      }
     },
    
     up:function(e,o){
      o.drag=false;
     },
    
     rtn:function(e){
      if(e.stopPropagation){
       e.stopPropagation();
      }
      if (!window.event){
       e.preventDefault();
      }
      e.cancelBubble=true;
      e.cancel=true;
      e.returnValue=false;
      return false;
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](e,p); }, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
      }
     }
    
    
    
    }
    
    zxcCustomScrollBar.init({
     ParentID:'demo1',
     SlideID:'slide'
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    martynball (06-10-2013)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •