Here I have created a vertical-rl environment;
(function() {
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.documentElement.scrollLeft -= (delta * 50);
document.body.scrollLeft -= (delta * 50);
e.preventDefault();
}
if (window.addEventListener) {
window.addEventListener("mousewheel", scrollHorizontally, false);
window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
window.attachEvent("onmousewheel", scrollHorizontally);
}
})();#body {
height: 80%;
min-width: 100%;
writing-mode: vertical-rl;
font-size: 3.0rem;
}<div id="body">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
<p>21</p>
<p>22</p>
</div>The javascript allows the vertical body to scroll from left to right when scrolling down with the mouse scroller.
However, since this is a vertical-rl environment, I am trying to figure out how to edit the script to scroll in the opposite direction; from right to left. I have attempted to modify the script but haven't been able to achieve the desired outcome.
Edit: please try viewing the snippet in full page mode.