Welcome to the in5 Answer Exchange! This a place to get answers about in5 (InDesign to HTML5) and make requests.
+2 votes
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.
in feature_requests by (600 points)
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.

1 Answer

0 votes
Best answer

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);
}); });

by (196k points)
selected by
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).