Title: Help tweak javascript &#8211; scrolling page
Last modified: August 19, 2016

---

# Help tweak javascript – scrolling page

 *  [grainspirit](https://wordpress.org/support/users/grainspirit/)
 * (@grainspirit)
 * [16 years, 7 months ago](https://wordpress.org/support/topic/help-tweak-javascript-scrolling-page/)
 * My website is:
    [http://www.anishaacharya.com/w/](http://www.anishaacharya.com/w/)
 * The above page uses 2 javascripts placed in the header.php as follows
 *     ```
       <HEAD>
       <script type="text/javascript">
       <!-- Begin
       document.onmousedown = function(){
         var e=arguments[0]||event;
         var x=zxcWWHS()[2]+e.clientX;
         var y=zxcWWHS()[3]+e.clientY;
         document.onmousemove=function(){
         var e=arguments[0]||event;
           window.scroll(x-e.clientX, y-e.clientY);
           return false;
         }
         document.onmouseup=function(){
           document.onmousemove=null;
         }
         return false;
       }
   
       function zxcWWHS(){
        if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
        else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
        return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
       }
   
       window.onload = function() {
       	HtinyScrolling.init(); scrollTips.init();
       }
   
       function gotoit(target){
       	HtinyScrolling.scrollToIt(target);
       }
   
       var HtinyScrolling = {
       	speed : 20,      //set here the scroll speed: when this value increase, the speed decrease.
       	maxStep: 100,	 //set here the "uniform motion" step for long distances
       	brakeK: 5,		 //set here the coefficient of slowing down
       	hash:null,
       	currentBlock:null,
       	requestedX:0,
       	init: function() {
       		var lnks = document.getElementsByTagName('a');
       		for(var i = 0, lnk; lnk = lnks[i]; i++) {
       			if ((lnk.href && lnk.href.indexOf('#') != -1) &&  ( (lnk.pathname == location.pathname) ||
       			('/'+lnk.pathname == location.pathname) ) && (lnk.search == location.search)) {
       			addEvent(lnk,'click',HtinyScrolling.initScroll,false);
       			lnk.onclick=function(){return false;} // Safari
       			}
       		}
       	},
       	getTarget: function(target) {
       		while(target.tagName.toLowerCase() != 'a')
       			target = target.parentNode;
       		return target;
       	},
       	getElementXpos: function(el){
       		var x = 0;
       		while(el.offsetParent){
       			x += el.offsetLeft;
       			el = el.offsetParent;
       		}	return x;
       	},
       	getScrollLeft: function(){
       		if(document.all) return (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
       		else return window.pageXOffset;
       	},
       	getWindowWidth: function(){
       		if (window.innerWidth)	return window.innerWidth;
       		if(document.documentElement && document.documentElement.clientWidth) return document.documentElement.clientWidth;
       	},
       	getDocumentWidth: function(){
       		if (document.width) return document.width;
       		if(document.body.offsetWidth) return document.body.offsetWidth;
       	},
       	initScroll: function(e){
       		var targ;
       		if (!e) var e = window.event;
       		if (e.target) targ = e.target;
       		else if (e.srcElement) targ = e.srcElement;
       		targ = HtinyScrolling.getTarget(targ);  //a fix by Skid X
       		HtinyScrolling.hash = targ.href.substr(targ.href.indexOf('#')+1,targ.href.length);
       		HtinyScrolling.currentBlock = document.getElementById(HtinyScrolling.hash);
       		if(!HtinyScrolling.currentBlock) return;
       		HtinyScrolling.requestedX = HtinyScrolling.getElementXpos(HtinyScrolling.currentBlock);
       		HtinyScrolling.scroll(targ);
       		return false;
       	},
       	scrollToIt: function(targ){ //thanks to Michael Ionita-Ganea
       		target = document.getElementById(targ);
       		HtinyScrolling.currentBlock = document.getElementById(targ);
       		if(!HtinyScrolling.currentBlock) return;
       		HtinyScrolling.requestedX = HtinyScrolling.getElementXpos(HtinyScrolling.currentBlock);
       		HtinyScrolling.scroll(target);
       		return false;
   
       	},
       	scroll: function(targ) {
       		var left  = HtinyScrolling.getScrollLeft();
       		if(HtinyScrolling.requestedX > left) { //a fix by Michael Ionita-Ganea
       			var endDistance = Math.round((HtinyScrolling.getDocumentWidth() - (left + HtinyScrolling.getWindowWidth())) / HtinyScrolling.brakeK);
       			endDistance = Math.min(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK), endDistance);
       			var offset = Math.min(Math.abs(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK)), HtinyScrolling.maxStep);
       		}else {
       				var offset = - Math.min(Math.abs(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK)), HtinyScrolling.maxStep);
       		}
       		window.scrollTo(left + offset, 0);
       		if(Math.abs(left-HtinyScrolling.requestedX) <= 1 || HtinyScrolling.getScrollLeft() == left) {
       			HtinyScrolling.hash = null;
       		} else 	setTimeout(HtinyScrolling.scroll,HtinyScrolling.speed);
       	}
       }
   
       var scrollTips = {
       	dx : null,
       	init : function() {
       		if (window.addEventListener) {
       		window.addEventListener("DOMMouseScroll", this.mouseScroll, false);
       		} else document.attachEvent("onmousewheel", this.mouseScroll);
       		var left = document.getElementById('left');
       		addEvent(left,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(0)',100);return false;});
       		addEvent(left,'mouseout', function() { clearInterval(this.dx); return false;});
       		var right = document.getElementById('right');
       		addEvent(right,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(1)',100);return false;});
       		addEvent(right,'mouseout', function() { clearInterval(this.dx); return false;});
       	},
       	mouseScroll : function(e) {
       		if (!e) var e = window.event;
       		  var scroll = e.detail ? e.detail * 20 : e.wheelDelta / -20;
       		if (scroll>=0 ){
       		window.scrollBy(100,0);
       		} else  window.scrollBy(-100,0) ;
       	},
       	arrowScroll: function(val) {
       		if(val==1) {
       			window.scrollBy(100,0);
       		} else {
       			window.scrollBy(-100,0)
       		}
       	}
       }
   
       function addEvent( obj, type, fn ) {
       	if (obj.addEventListener)
       		obj.addEventListener( type, fn, false );
       	else if (obj.attachEvent) {
       		obj["e"+type+fn] = fn;
       		obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
       		obj.attachEvent( "on"+type, obj[type+fn] );
       	}
       }
   
       function removeEvent( obj, type, fn ) {
       	if (obj.removeEventListener)
       		obj.removeEventListener( type, fn, false );
       	else if (obj.detachEvent) {
       		obj.detachEvent( "on"+type, obj[type+fn] );
       		obj[type+fn] = null;
       		obj["e"+type+fn] = null;
       	}
       }
   
       // End -->
       </script>
   
       </head>
       <body>
       <div id="header">
       </div>
       ```
   
 * One script is to grab and drag the page. The other is to allow horizontal scroll
   upon mouse wheel scroll. What I have been desperately trying to achieve is:
 * 1. To load both javascripts together. Now, ‘grab and drag’ works but ‘mouse wheel
   scroll’ works only after all the images have loaded.
 * 2. Once I grab and drag, I would like to have a slight page glide, similar to
   the iphone scrolling. That is grab and move to displace page, but allow the page
   to be ‘thrown’ and hence it glides a bit.
 * Thanks for your time.

Viewing 1 replies (of 1 total)

 *  [Parmenti](https://wordpress.org/support/users/parmenti/)
 * (@parmenti)
 * [16 years, 6 months ago](https://wordpress.org/support/topic/help-tweak-javascript-scrolling-page/#post-1257983)
 * hi, any idea how this might be added to a single div/element? I would like it
   to work in 1 particular div.. but not be applied to the whole page as it prevents
   scrolling on all other divs. Thanks.

Viewing 1 replies (of 1 total)

The topic ‘Help tweak javascript – scrolling page’ is closed to new replies.

## Tags

 * [horizontal](https://wordpress.org/support/topic-tag/horizontal/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [scroll](https://wordpress.org/support/topic-tag/scroll/)

 * 1 reply
 * 2 participants
 * Last reply from: [Parmenti](https://wordpress.org/support/users/parmenti/)
 * Last activity: [16 years, 6 months ago](https://wordpress.org/support/topic/help-tweak-javascript-scrolling-page/#post-1257983)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics
