www.webdeveloper.com
Results 1 to 3 of 3

Thread: Mouse-wheel scroll javascript not working on some web browsers

Hybrid View

  1. #1
    Join Date
    Aug 2009
    Posts
    20

    Unhappy Mouse-wheel scroll javascript not working on some web browsers

    I'm using the following javascript to mouse-wheel scroll through a horizontal web page. It works great in Firefox and Explorer but doesn't work in Safari and Chrome. Please help!

    Code:
    /* Tiny Scrolling - a smooth navigation between internal links and their destinations
    by Marco Rosella - http://www.centralscrutinizer.it/en/design/js-php/tiny-scrolling
    based on the works by Travis Beckham and Brian McAllister.
                    v0.3 - March 27, 2006
    */
    
    window.onload = function() {
    	tinyScrolling.init();
    	}
    
    var tinyScrolling = {
    	speed : 50,      //set here the scroll speed: when this value increase, the speed decrease. 
    	maxStep: 150,	 //set here the "uniform motion" step for long distances
    	brakeK: 3,		 //set here the coefficient of slowing down
    	hash:null,		
    	currentBlock:null,
    	requestedY: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)) {  
    				lnk.onclick = tinyScrolling.initScroll;   		
    				}   
    			}
    	},
    	getElementYpos: function(el){
    			var y = 0;
    			while(el.offsetParent){  
    				y += el.offsetTop    
    				el = el.offsetParent;
    			}	return y;
    	},		
    	getScrollTop: function(){
    			if(document.all) return (document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
    			else return window.pageYOffset;   
    	},	
    	getWindowHeight: function(){
    			if (window.innerHeight)	return window.innerHeight;
    			if(document.documentElement && document.documentElement.clientHeight) return document.documentElement.clientHeight;
    	},
    	getDocumentHeight: function(){
    			if (document.height) return document.height;
    			if(document.body.offsetHeight) return document.body.offsetHeight;
    	},
    	initScroll: function(e){
    			var targ;  
    			if (!e) var e = window.event;
    			if (e.target) targ = e.target;
    			else if (e.srcElement) targ = e.srcElement;   
    			tinyScrolling.hash = targ.href.substr(targ.href.indexOf('#')+1,targ.href.length); 
    			tinyScrolling.currentBlock = document.getElementById(tinyScrolling.hash);   
    			if(!tinyScrolling.currentBlock) return;
    			tinyScrolling.requestedY = tinyScrolling.getElementYpos(tinyScrolling.currentBlock); 
    			tinyScrolling.scroll();  
    			return false;
    	},
    	scroll: function(){
    			var top  = tinyScrolling.getScrollTop();
    			if(tinyScrolling.requestedY > top) {  
    				var endDistance = Math.round((tinyScrolling.getDocumentHeight() - (top + tinyScrolling.getWindowHeight())) / tinyScrolling.brakeK);
    				endDistance = Math.min(Math.round((tinyScrolling.requestedY-top)/ tinyScrolling.brakeK), endDistance);
    				var offset = Math.max(2, Math.min(endDistance, tinyScrolling.maxStep));
    			} else { var offset = - Math.min(Math.abs(Math.round((tinyScrolling.requestedY-top)/ tinyScrolling.brakeK)), tinyScrolling.maxStep);
    			} window.scrollTo(0, top + offset);  
    			if(Math.abs(top-tinyScrolling.requestedY) <= 1 || tinyScrolling.getScrollTop() == top) {
    				window.scrollTo(0, tinyScrolling.requestedY);
    				if(!document.all || window.opera) location.hash = tinyScrolling.hash;
    				tinyScrolling.hash = null;
    			} else 	setTimeout(tinyScrolling.scroll,tinyScrolling.speed);
    	}		
    }

  2. #2
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    You do not need a script. Page scrolling is the default action of the mouse wheel in most browsers

  3. #3
    Join Date
    Aug 2009
    Posts
    20
    The code is for a horizontal website...there's no vertical scroll at all..It's a horizontal scroll of width 30000px!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles