Chrome插件：论坛左侧文章目录滚动

Ganlv

[ 本帖最后由 Ganlv 于 2018-6-2 14:50 编辑 ]\n\n

效果图

说明

核心代码其实就几句，插件的功能就是每次打开页面之后执行这句话。

(function () {
    var tocSideElements = document.querySelectorAll('.toc-side');
    window.addEventListener('scroll', function(e) {
        for (var i = 0; i < tocSideElements.length; ++i) {
            var tocSide = tocSideElements[i];
            var tocSideRect = tocSide.getBoundingClientRect();
            var tocSideMarginBottom = parseInt(window.getComputedStyle(tocSide).getPropertyValue('margin-bottom'));
            var tocSideHeight = window.innerHeight - tocSideMarginBottom - tocSideRect.top;
            if (tocSideHeight < tocSide.scrollHeight) {
                tocSide.style.height = tocSideHeight + 'px';
            } else {
                tocSide.style.height = '';
            }
        }
    });
    for (var i = 0; i < tocSideElements.length; ++i) {
        (function (tocSide) {
            tocSide.addEventListener('wheel', function (e) {
                if (e.deltaY > 0 && tocSide.scrollTop + tocSide.offsetHeight > tocSide.scrollHeight - 1
                    || e.deltaY < 0 && tocSide.scrollTop < 1) {
                    e.preventDefault();
                }
            });
        })(tocSideElements[i]);
    }
    var style = document.createElement('style');
    style.textContent = '.toc-side { overflow-y: scroll; } .toc-side::-webkit-scrollbar { width: 0 !important; }';
    document.querySelector('head').appendChild(style);
})();

附件

52pojie_cn_chrome_extentsion.zip (1.7 KB, 下载次数: 71)

2018-3-18 22:34 上传

点击文件名下载附件

更新历史

版本 0.1

新增：目录区域滚动效果。

版本 0.2

新增：在目录区域内滚动滚轮不会影响到主窗口。感谢 本帖24楼 提出的建议。

版本 0.3

修复：滚动到帖子末端时，列表展开不全的问题。
修复：0.2版的一个逻辑错误。

最新版本

已和新功能整合，具体请查看新帖 Chrome插件：论坛帖子折叠。

相关链接

• Chrome：去除插件开发者模式每次打开的提示
• Chrome：修改组策略或注册表启用插件
• Chrome插件：论坛左侧文章目录滚动
• Chrome插件：论坛帖子折叠

测试

测试

测试

测试

测试

测试

测试

测试

测试

测试

测试

测试

测试

测试

测试

测试

测试

测试

测试

测试

测试

测试

测试

测试

Ganlv

Hmily 发表于 2018-3-18 21:03
@Ganlv 直接加在插件里是不是好点？

只支持webkit浏览器，或者说能装这个插件的浏览器都是正常的，不能装的不保证会不会出什么问题。

xiaobaoge

感谢发布原创作品，吾爱破解论坛因你更精彩！

bmwgtr

前排支持大神~~~
感谢

Ps出来的小赵

不能启用啊，大佬- -。

z128436131

前来向大佬学习

ScareCrowL

支持支持~不过如果用markdown的话，直接就有导航了也不错，哈哈~

didi科学家

小白默默路过！ 有效果膜拜会开发扩展的大佬

落落轻风

没有效果啊？

linuxprobe

有时候插件按多了，影响浏览器的使用。

Ganlv

ScareCrowL 发表于 2018-3-17 19:46
支持支持~不过如果用markdown的话，直接就有导航了也不错，哈哈~

目的是如果列表过长，下面的看不到。