[ 本帖最后由 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)
更新历史
版本 0.1
新增:目录区域滚动效果。
版本 0.2
新增:在目录区域内滚动滚轮不会影响到主窗口。感谢 本帖24楼 提出的建议。
版本 0.3
修复:滚动到帖子末端时,列表展开不全的问题。
修复:0.2版的一个逻辑错误。
最新版本
已和新功能整合,具体请查看新帖 Chrome插件:论坛帖子折叠。
相关链接
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
|