按Ctrl+↑和Ctrl+↓快速跳转楼层

hbghlyj

在/static/js/forum_viewthread.js中加入

1. var currentpost = 0;
2. function updatecurrentpost() {
3.     currentpost = [0, 1, 2].find(x=>parseInt(document.querySelectorAll('table.plhin')[x].getBoundingClientRect().bottom) > 0)
4. }
5. onkeydown = function(e) {
6.     if (e.key == 'ArrowUp' && e.ctrlKey) {
7.         if (parseInt(document.querySelectorAll('table.plhin')[currentpost].getBoundingClientRect().top) < 0) {
8.             scrollto(currentpost)
9.         } else {
10.             scrollto(currentpost - 1)
11.         }
12.     }
13.     if (e.key == 'ArrowDown' && e.ctrlKey) {
14.         scrollto(currentpost + 1)
15.     }
16. }
19. function scrollto(num) {
20.     if (num == -1) {
21.         scrollTo(0, 0)
22.     } else {
23.         if (document.querySelectorAll('table.plhin')[num]) {
24.             scrollBy(0, document.querySelectorAll('table.plhin')[num].getBoundingClientRect().top)
25.         } else {
26.             scrollTo(0, document.body.scrollHeight)
27.         }
28.     }
29. }
31. _attachEvent(window, 'scroll', updatecurrentpost);

复制代码

注1:因为我的论坛上是每3个帖子就换一页,所以currentpost只能取0,1,2这些值.
注2:_attachEvent 是Discuz自带的函数
$\Huge\unicode{x1F600}$
左右键翻页是Discuz自带的功能(包括这个论坛!),由模板:template/default/forum/viewthread.htm中的下面的部分实现:

1. <script type="text/javascript">document.onkeyup = function(e){keyPageScroll(e, <!--{if $page > 1}-->1<!--{else}-->0<!--{/if}-->, <!--{if $page < $_G['setting']['threadmaxpages'] && $page < $_G['page_next']}-->1<!--{else}-->0<!--{/if}-->, 'forum.php?mod=viewthread&tid=$_G[tid]<!--{if $_GET[authorid]}-->&authorid=$_GET[authorid]<!--{/if}-->', $page);}</script>

复制代码

其中的keyPageScroll的定义在forum.js中:

1. function keyPageScroll(e, prev, next, url, page) {
2.     if (loadUserdata('is_blindman')) {
3.         return true;
4.     }
5.     e = e ? e : window.event;
6.     var tagname = BROWSER.ie ? e.srcElement.tagName : e.target.tagName;
7.     if (tagname == 'INPUT' || tagname == 'TEXTAREA')
8.         return;
9.     actualCode = e.keyCode ? e.keyCode : e.charCode;
10.     if (next && actualCode == 39) {
11.         window.location = url + '&page=' + (page + 1);
12.     }
13.     if (prev && actualCode == 37) {
14.         window.location = url + '&page=' + (page - 1);
15.     }
16. }

复制代码

例如下面是从某个帖子的第3页的源代码中抽取出来的片段:
document.onkeyup = function(e){keyPageScroll(e, 1, 1, 'forum.php?mod=viewthread&tid=262', 3);}
这里的e是事件,第一个1代表之前有页(如果是第一页那么之前没有页则为0),第二个1代表之后有页(如果是末页那么之后没有页则为0),最后一个参数3代表当前页面为第3页.

hbghlyj

回复 1# hbghlyj
如果屏幕比较窄,就会有横向滚动条,如果按下←或→来横向滚动的话就会触发翻页功能,这是不好的,所以我们用

1. document.body.scrollWidth==document.body.offsetWidth

复制代码

来判断一下页面是否横向溢出.如果是true就没有溢出,如果是false就说明溢出了.
我们可以用

1. Math.abs(-document.body.getBoundingClientRect().left+document.body.getBoundingClientRect().width-document.body.scrollWidth)<1

复制代码

来判断页面的横向滚动是否到底.如果向左滚动到底,再按向左箭头,就翻到上一页;如果向右滚动到底,再按向右箭头,就翻到下一页.

hbghlyj

我有一个不理解的地方:为什么document.body的scrollLeft总是0?我的滚动条到左边的距离不是0啊

另外,

1. document.body.getClientRects()[0].x+scrollX

复制代码

总是一个非常接近0的小数,让人摸不着头脑

kuing

“按Ctrl+↑和Ctrl+↓快速跳转楼层”这想法挺好

晚点研究一下你的代码。

哦对了，论坛上帖子右下角的“TOP”好像失效了，可不可以顺便解决一下？

hbghlyj

回复 4# kuing
scrollTo(0,0)就可以滚动到顶部了.
Window.scrollTo() --Web接口参考

另外,那个括弧在chtml下变正常了,只要加一条CSS规则 可以把默认渲染器换成chtml吗

kuing

回复 5# hbghlyj

现在 TOP 的 html 就是 <a href="javascript:;" onclick="scrollTo(0,0);">TOP</a> 这样写的。
=====
哦，原来是少了“window.”，补上就 OK 鸟

chtml 的事晚点我研究下再讲，为啥不喜欢 svg？

hbghlyj

回复 6# kuing
因为我们可以通过css修改html的内容
而且保存为pdf以后有文字层
并且mathjax官网的默认渲染器是chtml
但是比svg稍慢一点点

kuing

回复 7# hbghlyj

css修改html、存pdf，这都不是经常有的需求，效果稳定更重要，svg 没那么多细节问题。

kuing

回复 9# hbghlyj

我也不懂

hbghlyj

回复 1# hbghlyj
小修改了一下...现在按Alt+←或Alt+→就不会触发翻页了...防止冲突(它们是浏览器自带的浏览历史记录导航键,相当于history.back()和history.forward())

hbghlyj

这帖说svg is generally slow to render
但是根据这帖的性能对比,是svg更快一些.
咱也不知道是哪个更快些,或许和公式有关?
要不我们测试一下...上面的数据都年代久远了
微分方程
另外,我用文本查看器打开生成的pdf,发现里面有mathjax嵌入的各种字体...如果换成svg就没有mathjax的字体,只有帖子的其他部分中用到的字体,由此可知pdf中的公式是经过text-to-path处理了的,和官方文档中所说的一样

hbghlyj

ctext的按段落阅读模式也有“左右键翻页”
例如ctext.org/dictionary.pl?if=gb&id=7618&remap=gb
它的代码是

1. document.onkeydown = function(e) {var pK = e? e.which: window.event.keyCode; if(pK == 37) { window.location.href=document.getElementById('urlprev').href; return false; } if(pK == 39) { window.location.href=document.getElementById('urlnext').href; return false; } return true;};

复制代码