narou_vertical_Userscript.user.js

// ==UserScript==
// @name         narou vertical Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://ncode.syosetu.com/n*/*/
// @grant        none
// @require      https://cdn.jsdelivr.net/npm/vue/dist/vue.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js
// ==/UserScript==

(function() {
    'use strict';

    var vm = new Vue({
        el: '#novel_honbun',
        data: {
            scrollleft:0,
        },
    });

    TweenLite.defaultOverwrite = "all";
    vm.$el.addEventListener('wheel', function(e){
        const newval = vm.$el.scrollLeft - e.deltaY;
        TweenLite.to(vm.$el, 0.1, { scrollLeft: newval });
//        vm.$el.scrollLeft -= e.deltaY;
        e.preventDefault();
    },false);

    vm.$el.addEventListener('click', function(e){
        var elemWidth = parseInt(window.getComputedStyle(vm.$el, null).width);
        var dir = (e.layerX < elemWidth * .2) ? 1: (elemWidth - e.layerX < elemWidth * .2) ? -1 : 0;
        var delta = Math.min(e.layerX , elemWidth - e.layerX)

        if(delta === 0) return false;

        const newval = vm.$el.scrollLeft - dir * (elemWidth);
        if(newval < 0){
            var w = parseInt(window.getComputedStyle(vm.$el.lastElementChild, null).width);
            vm.$el.lastElementChild.style.cssText = "width: "+(w-newval)+"px";
        }
     TweenLite.to(vm.$el, 0.5, { scrollLeft: newval });
        e.preventDefault();
    },false);


    ///////////////////////
	var css = [
		"@namespace url(http://www.w3.org/1999/xhtml);",
		"#novel_color{",
		"   	width:80%;",
		"}",
		"body,.contents1{",
        "    background-color: #fff7e5;",
		"}",
		"#novel_honbun{",
		"    overflow:scroll;",
		"    writing-mode: vertical-rl;",
		"  	text-combine-upright: digits 3;",
		"    width:100%;",
		"    max-height:80%;",
		"    font-family: \"Yu Mincho\", \"YuMincho\";",
		"    font-weight:500;",
		"    line-height:1.6em !important;",
		"    margin-bottom: 0px;",
		"    margin-top: 20px;",
		"}",
		"",
		".contents1 {",
		"    height: 0px;",
		"    margin-bottom: 0px;",
		"    padding-bottom: 0px;",
		"}",
		".novel_title, .novel_subtitle {",
		"    font-size: 120% !important;",
		"    line-height: 100%;",
		"}",
		".chapter_title{",
		"    height:0px;",
		"}",
		"",
		"#novel_no{",
		"    height:0px;",
		"}",
		"",
		"#novel_p,.novel_subtitle{",
		"	margin-top:0px;",
		"    padding-top:0px;",
		"	margin-bottom:0px;",
		"    padding-bottom:0px;",
		"}"
	].join("\n");
    if (typeof GM_addStyle != "undefined") {
        GM_addStyle(css);
    } else if (typeof PRO_addStyle != "undefined") {
        PRO_addStyle(css);
    } else if (typeof addStyle != "undefined") {
        addStyle(css);
    } else {
        var node = document.createElement("style");
        node.type = "text/css";
        node.appendChild(document.createTextNode(css));
        var heads = document.getElementsByTagName("head");
        if (heads.length > 0) {
            heads[0].appendChild(node);
        } else {
            // no head yet, stick it whereever
            document.documentElement.appendChild(node);
        }
    }

})();

なろう小説を縦書き、本文上でのホイールスクロール、本文エリア内側両端でのページスクロールを行うスクリプトです。
chrome専用