Scroll page horizontally with Mouse wheel: Support for Jquery Mouse wheel

Question

Please we all need this as the web is blurring the gap between traditional reading and digital reading.. It will be a great, if in5 can  natively support horizontal scroll page with mouse wheel for easy reading experience. This is a demo: http://css-tricks.com/examples/HorzScrolling/  Windows 8 news app is also a good example.

This is highly required for magazine reading.

Comments

Thanks for posting this. Definitely something for us to consider.

Oddly, the CSS-tricks example does not work in my current browser.

---

What browser are you using? I tested in chrome, safari n it worked well. It must in ff you r talking about. Hmm... Strange things happen.

---

Latest Firefox on Mac.

---

Hi Justin, when will this feature be real in in5. It is stalling my project. Congrats on the latest release.

Answer 1

To enable horizontal scrolling (and disable vertical scrolling), paste the following code at the end of assets/js/in5.config.js:

(function(a){function d(b){var c=b||window.event,d=[].slice.call(arguments,1),e=0,f=!0,g=0,h=0;return b=a.event.fix(c),b.type="mousewheel",c.wheelDelta&&(e=c.wheelDelta/120),c.detail&&(e=-c.detail/3),h=e,c.axis!==undefined&&c.axis===c.HORIZONTAL_AXIS&&(h=0,g=-1*e),c.wheelDeltaY!==undefined&&(h=c.wheelDeltaY/120),c.wheelDeltaX!==undefined&&(g=-1*c.wheelDeltaX/120),d.unshift(b,e,g,h),(a.event.dispatch||a.event.handle).apply(this,d)}var b=["DOMMouseScroll","mousewheel"];if(a.event.fixHooks)for(var c=b.length;c;)a.event.fixHooks[b[--c]]=a.event.mouseHooks;a.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=b.length;a;)this.addEventListener(b[--a],d,!1);else this.onmousewheel=d},teardown:function(){if(this.removeEventListener)for(var a=b.length;a;)this.removeEventListener(b[--a],d,!1);else this.onmousewheel=null}},a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery)
$(function() {
$("html, body").mousewheel(function(e, delta) {
    $('html, body').stop().animate({scrollLeft: '-='+(150*delta)+'px' }, 200);
    e.preventDefault();
}); });

Comments

Thanks Justin for coming up with a temporary fix for this. I noticed that in5 overwrites the in5.config.js everytime I export with in5. This could be nauseating especially while still designing and reviewing and uploading to server. An ETA on when this will be integrated natively in in5 will be appreciated.

---

We don't have any plans to integrate the mousewheel feature at this time, but we plan to release a version of in5 in the next month or so that will allow you to add custom code that will not be overwritten when you re-export.

(Update: The Resources section of the in5 dialog lets you add custom code that appears each time your export, so you don't have to manually update the output).

---

Hi There, I have tried pasting the above code to the end of the js file indicated, and saved the file. The behavior doesn't seem change from vertical scroll to horizontal. I've also added it in the resources section for js upon export. I've tried several different form factors from the easy export wizard just to make sure I'm covering all my bases.

We love the idea of this working as it'd give up yet another digital story telling method.

Thanks for any guidance / help that can be sent our way.

---

Hi Eric,

The code above does not change vertical scrolling to horizontal. That can be done by selecting a different Page Format when you export.