scroll - Javascript scrollbar class and mousewheel speed in different browsers -
i'm getting many reports mousewheel behaves differently in different browsers when using scrollbar class. in browsers (like firefox) it's extremely slow while in others (mostly newer versions of safari on snow leopard) it's perfect.
any ideas what's going on here , how fix it? i'm using mootools library. 1 line pay attention here wheel: (browser.firefox) ? 20 : 1 line. set speed or steps mousewheel.
here set in jsfiddle: http://jsfiddle.net/brandondurham/6suym/
var scrollbar = new class({ implements: [events, options], options: { wheel: (browser.firefox) ? 20 : 1 }, initialize: function(main, options) { this.setoptions(options); this.main = $(main); this.content = this.main.getfirst(); this.vscrollbar = new element('div', { 'class': 'scrollbar' }).inject(this.content, 'after'); this.vtrack = new element('div', { 'class': 'track' }).inject(this.vscrollbar); this.vthumb = new element('div', { 'class': 'handle' }).inject(this.vtrack); this.bound = { 'vstart': this.vstart.bind(this), 'end': this.end.bind(this), 'vdrag': this.vdrag.bind(this), 'vtouchdrag': this.vtouchdrag.bind(this), 'wheel': this.wheel.bind(this), 'vpage': this.vpage.bind(this), }; this.vscrollbar.set('tween', { duration: 200, transition: 'cubic:out' }); this.main.addevent('mouseenter', function(event){ this.vscrollbar.get('tween').cancel(); this.vscrollbar.tween('width', 12); }.bind(this)); this.main.addevent('mouseleave', function(event){ this.vscrollbar.get('tween').cancel(); this.vscrollbar.tween('width', 0); }.bind(this)); this.vposition = {}; this.vmouse = {}; this.update(); this.attach(); this.scrollcontent = new fx.scroll(this.content, { duration: 800, transition: fx.transitions.cubic.easeout, }); this.scrollthumb = new fx.morph(this.vthumb, { duration: 400, transition: fx.transitions.cubic.easeout, }); }, update: function() { var panel_id = (this.content.getfirst()) ? this.content.getfirst().get('id') : ''; if ((this.content.scrollheight <= this.main.offsetheight) || panel_id == 'random-doodle') this.main.addclass('noscroll'); else this.main.removeclass('noscroll'); this.vcontentsize = this.content.offsetheight; this.vcontentscrollsize = this.content.scrollheight; this.vtracksize = this.vtrack.offsetheight; this.vcontentratio = this.vcontentsize / this.vcontentscrollsize; this.vthumbsize = (this.vtracksize * this.vcontentratio).limit(12, this.vtracksize); this.vscrollratio = this.vcontentscrollsize / this.vtracksize; this.vthumb.setstyle('height', this.vthumbsize); this.vupdatethumbfromcontentscroll(); this.vupdatecontentfromthumbposition(); }, vupdatecontentfromthumbposition: function() { this.content.scrolltop = this.vposition.now * this.vscrollratio; }, vupdatecontentfromthumbposition2: function() { var pos = this.vposition.now * this.vscrollratio; this.scrollcontent.start(0, pos); }, vupdatethumbfromcontentscroll: function() { this.vposition.now = (this.content.scrolltop / this.vscrollratio).limit(0, (this.vtracksize - this.vthumbsize)); this.vthumb.setstyle('top', this.vposition.now); }, vupdatethumbfromcontentscroll2: function(pos) { this.vposition.now = (this.content.scrolltopnew / this.vscrollratio).limit(0, (this.vtracksize - this.vthumbsize)); this.scrollthumb.start({ 'top': this.vposition.now }); }, attach: function() { if (this.options.wheel) this.content.addevent('mousewheel', this.bound.wheel); this.content.addevent('touchstart', this.bound.vstart); this.vthumb.addevent('mousedown', this.bound.vstart); this.vtrack.addevent('mouseup', this.bound.vpage); }, wheel: function(event) { this.content.scrolltop -= event.wheel * this.options.wheel; this.vupdatethumbfromcontentscroll(); event.stop(); }, scrollto: function(pos){ myinstance = this; this.content.scrolltopnew = pos; this.scrollcontent.start(0, this.content.scrolltopnew); myinstance.vupdatethumbfromcontentscroll2(pos); }, vpage: function(event) { // if scrolling if (event.page.y > this.vthumb.getposition().y) { myinstance = this; this.content.scrolltopnew = this.content.scrolltop.toint() + this.content.offsetheight.toint(); this.scrollcontent.start(0, this.content.scrolltopnew); } // if scrolling down else { myinstance = this; this.content.scrolltopnew = this.content.scrolltop.toint() - this.content.offsetheight.toint(); this.scrollcontent.start(0, this.content.scrolltopnew); } myinstance.vupdatethumbfromcontentscroll2(event.page.y); event.stop(); }, vstart: function(event) { this.vmouse.start = event.page.y; this.vposition.start = this.vthumb.getstyle('top').toint(); document.addevent('touchmove', this.bound.vtouchdrag); document.addevent('touchend', this.bound.end); document.addevent('mousemove', this.bound.vdrag); document.addevent('mouseup', this.bound.end); this.vthumb.addevent('mouseup', this.bound.end); event.stop(); }, end: function(event) { document.removeevent('touchmove', this.bound.vtouchdrag); document.removeevent('mousemove', this.bound.vdrag); document.removeevent('mouseup', this.bound.end); this.vthumb.removeevent('mouseup', this.bound.end); event.stop(); }, vtouchdrag: function(event) { this.vmouse.now = event.page.y; this.vposition.now = (this.vposition.start - (this.vmouse.now - this.vmouse.start)).limit(0, (this.vtracksize - this.vthumbsize)); this.vupdatecontentfromthumbposition(); this.vupdatethumbfromcontentscroll(); event.stop(); }, vdrag: function(event) { this.vmouse.now = event.page.y; this.vposition.now = (this.vposition.start + (this.vmouse.now - this.vmouse.start)).limit(0, (this.vtracksize - this.vthumbsize)); this.vupdatecontentfromthumbposition(); this.vupdatethumbfromcontentscroll(); event.stop(); } });
the mouse wheel event dodgy in javascript, main issue being safari used adjust ratio on every point release, , values reported event not same in major browsers.
there has been discussion on mootools tracker time ago (link) , comparing different solutions concluded there's no standard way normalize event.
last message on issue shows possible solution normalizing (link), breaks wheel acceleration in safari (and other acceleration other browser/os/mouse driver combination offers) tradeoff have evaluate if fits requirements of usage scenario.
Comments
Post a Comment