dynamic scrolling CSS/Java/HTML?

**guppy** · 08-02-2010, 12:47 PM

I'm building a website which has a spread of content, so it requires both x and y scrolling. However, unless you have a mac laptop with gestures or a mouse with a scrolling ball, it can be frustrating to navigate. Is there any sort of CSS or Javascript that can create either auto-scrolling when the mouse reaches the edge of the screen, or some sort of click-grab-drag action?

///

http://www.guppology.com

**Beverleyh** · 08-02-2010, 01:09 PM

The link you provided doesnt show excessively wide or long content

**vwphillips** · 08-02-2010, 01:43 PM

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>
</head>

<body>
Mousedown and Drag
<img src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" width="1404" />
<script type="text/javascript">
/*<![CDATA[*/



function zxcWS(){
 if (window.innerHeight) return [window.pageXOffset,window.pageYOffset];
 else if (document.documentElement.clientHeight) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
 return [document.body.scrollLeft,document.body.scrollTop];
}

function zxcScroll(){

 this.addevt(document,'mousedown','mse');
 this.addevt(document,'mouseup','mse');
 this.addevt(document,'mousemove','msemove');
}

zxcScroll.prototype={

 mse:function(e){
  this.drag=e.type=='mousedown';
  this.sx=zxcWS()[0];
  this.sy=zxcWS()[1];
  this.mx=e.clientX;
  this.my=e.clientY
  if (e.preventDefault){
   e.preventDefault();
  }
  return false;
 },

 msemove:function(e){
  if (this.drag==true){
   var mx=e.clientX,my=e.clientY
   window.scrollTo(this.sx-e.clientX+this.mx,this.sy-e.clientY+this.my);
   if (e.preventDefault){
    e.preventDefault();
   }
   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); });
 }

}

new zxcScroll();
/*]]>*/
</script></body>

</html>

Thread: dynamic scrolling CSS/Java/HTML?

Thread Tools

Search Thread

dynamic scrolling CSS/Java/HTML?

Bookmarks

Bookmarks

Posting Permissions