ComicRead

为漫画站增加双页阅读、翻译等优化体验的增强功能。百合会(记录阅读历史、自动签到等)、百合会新站、动漫之家(解锁隐藏漫画)、E-Hentai(关联 nhentai、快捷收藏、标签染色、识别广告页等)、nhentai(彻底屏蔽漫画、无限滚动)、Yurifans(自动签到)、拷贝漫画(copymanga)(显示最后阅读记录、解锁隐藏漫画)、PonpomuYuri、再漫画、明日方舟泰拉记事社、禁漫天堂、漫画柜(manhuagui)、漫画DB(manhuadb)、动漫屋(dm5)、绅士漫画(wnacg)、mangabz、komiic、MangaDex、無限動漫、新新漫画、熱辣漫畫、hitomi、SchaleNetwork、kemono、nekohouse、welovemanga

< Commentaires sur ComicRead

Question / commentaire

§
Posté le: 11/12/2023

能不能讓用戶設置關閉滾輪翻頁?
用的滑鼠是無段滾輪,稍微滾到就會連翻好幾頁

hymbzAuteur
§
Posté le: 15/12/2023

直接禁止滚轮翻页感觉有点因噎废食了😂。刚更新优化了一下滚动事件的判定触发,现在只有在滚动超过一定距离后才会触发翻页。不过因为我现在手上没有这种鼠标,所以只能用触摸板来测试,我自己体感良好,你试试看这样可以吗?

§
Posté le: 15/12/2023

新的优化有試用了一下,感覺有點差異,但沒什麼幫助.
我是用 macOS 配 Magic Mouse,它的捲頁有慣性,很像在划手機一樣,就算手指已經離開了,捲頁還是會持續一小段時間才停..

也許可以設置一個全局變量 var flagScroll=false
flagScroll == false 時才能進行翻頁
滾動觸發翻頁時改 flagScroll=true
並在 0.3 秒後自動改回 false,setTimeout(()=>{ flagScroll=false; }, 300);

這樣改如何?
等於是限制不論滾輪滾多少距離,0.3 秒內都只能翻一頁

hymbzAuteur
§
Posté le: 15/12/2023

这个方案我也有想过,但因为我自己就习惯在看CG集时通过大幅度地滚动滚轮来快速跳页浏览,使用这种方案的话就做不到这样了。

感觉没什么帮助是说触发频率还是太高了吗?还是指会受到滚动惯性影响?滚动惯性这个我试了下用 win 触摸板也能复现,只不过因为我自己测试的时候都是慢慢滚的所以没发现。

如果是指触发频率太高的话,可以改下脚本3036行if (Math.abs(wheelDeltaY) < 40) return;里的40这个数值,把他调大试试看能不能改善。

§
Posté le: 15/12/2023

macOS 下的滾輪和觸控板行為其實挺複雜的,不僅滑動距離有影響,滑動速度也會影響。
同樣在觸控板上移動 1cm,快速滑過去跟慢慢滑,兩者的捲動範圍結果會有幾十倍的差距.
不同人使用,會養出不同習慣。所以很難設定出一個固定的安全捲頁數值.

若依據我平常的習慣,wheelDeltaY 臨界值最低要 370 左右,但手指滑快點還是會一次捲個十幾頁過去。
所以我後來還是在 wheelDeltaY 後面多加上 0.3 秒的限制比較合用

hymbzAuteur
§
Posté le: 16/12/2023

同樣在觸控板上移動 1cm,快速滑過去跟慢慢滑,兩者的捲動範圍結果會有幾十倍的差距.

win 触摸板只要在滑动后不松开手指,就不会触发惯性滑动,Magic Mouse 没办法这样子避免触发惯性吗?

手指滑快點還是會一次捲個十幾頁過去

我是希望能和平时滚动网页的体验保持一致,在仔细看内容时要控制手指慢慢滑,在快速浏览时只要快速的用手指滑一下就好。所以你说的这一点正是我想要实现的效果(

另外如果加了时间限制,在避免触发惯性的前提下,同样的滑动距离在不同速度下翻页数也会不同。这和平时滚动网页的体验也是完全不同的。

hymbzAuteur
§
Posté le: 17/12/2023

https://gist.github.com/hymbz/5439639d8b21f06610b412c15b2390c4

做了一版把触摸板滚动转换成触摸屏滑动的测试版,你试下这种感觉如何?注意安装完这个测试版要把正式版禁用掉。

我是感觉只要再将滚动惯性的最后一小段位移给屏蔽掉后就基本完美了。相比限制滚动的距离和时间,这种方案更加直观明显,操作体验上也和触摸屏基本一致。

§
Posté le: 17/12/2023

這測試版用起來感覺良好,
原本的滾輪,windows 和 mac 的捲動判讀差距很大,
這觸摸板的滑動方式,windows 跟 mac 的判讀反應蠻一致的

hymbzAuteur
§
Posté le: 18/12/2023

已更新实装。

hymbzAuteur
§
Posté le: 19/12/2023

对了有一点要说下,因为在第一次触发滚动时没办法判断是滚轮还是触摸板,所以第一次滚动会直接当作滚轮处理,在第二次触发发现其实是触摸板后再撤回上次的翻页,所以用触摸板滚动可能会在第一次滚动时闪烁一下页面。

为了降低闪烁概率,现在第一次滚动会先等待16ms后再执行,只要前两次滚动的间隔时间小于16ms就不会有闪烁,虽然我这边测试没问题,但如果你在使用的时候出现了闪烁,可以把代码3362行的16调大,然后跟我说下我更新代码。

§
Posté le: 19/12/2023

我用起來不行。第一次它會把滾動模式滾動的量給滾完才肯切換滑動模式,不論 timeoutout 設多久都沒用,只要手指沒停,它就會一直維持在滾動模式..


看了一下目前翻頁方式是用 --page-y 控制位移,隱藏其它頁面,只留鄰近三頁在切換。
也許可以試試另一種方向:不隱藏任何一頁,所有圖片放在一個超長頁下(隱藏側邊捲軸),讓它使用瀏覽器原本的捲頁行為模式。
然後把超長頁綁上捲動事件 addEventListener("scroll") 去控制最後翻頁的落點,這樣就不會有切換圖片的閃動

§
Posté le: 20/12/2023

这样搞得对于我们这些普通系统的,用了一下触摸板滑后滑轮失效了

hymbzAuteur
§
Posté le: 20/12/2023

第一次它會把滾動模式滾動的量給滾完才肯切換滑動模式

没太看懂,是说第一次滚动的时候会一次性触发多次翻页,第二次滚动才会变成滑动页面的效果吗?

也許可以試試另一種方向:不隱藏任何一頁,所有圖片放在一個超長頁下(隱藏側邊捲軸),讓它使用瀏覽器原本的捲頁行為模式。

只保留临近的几页主要是为了减轻浏览器资源占用。不通过页面滚动来实现翻页则是为了方便统一实现左右滑动翻页和缩放的动效。另外因为 scrollTo 不支持小数,所以使用 translate 也能显得更加丝滑。

然後把超長頁綁上捲動事件 addEventListener("scroll") 去控制最後翻頁的落點,這樣就不會有切換圖片的閃動

你在翻页的时候会出现闪烁吗?是每次翻页的时候都会有吗?

hymbzAuteur
§
Posté le: 20/12/2023

这样搞得对于我们这些普通系统的,用了一下触摸板滑后滑轮失效了

因为之前也完全没对触摸板操作搞过优化,随便滑一下就会滑到底,所以我还以为现有的用这个脚本的用户即使有在使用触摸板,也会特别注意不触发滚动,所以对现有用户来说应该是无感的😂

不过主要还是因为想说应该很少有人一会用触摸板滚动一会用鼠标滚动,所以才偷懒不考虑两种滚动方式来回切换的情况(

hymbzAuteur
§
Posté le: 20/12/2023

只要手指沒停,它就會一直維持在滾動模式

既然手指还在滚动,那当前的动作也不该中断吧。你是希望和在手机上的滑动操作类似,每次滚动都只能翻一页吗?

hymbzAuteur
§
Posté le: 20/12/2023

第一次它會把滾動模式滾動的量給滾完才肯切換滑動模式

是说在滚动完后到页面自动定位到正确位置的这段时间太长吗?

那应该调大3077行代码if (Math.abs(absDeltaY - lastDeltaY$1) <= 2) {里的这个2。同时最好调小下面第二行deltaY *= 1 - Math.min(1, ((Date.now() - retardStartTime) / 10) * 0.1);里的0.1

目前的逻辑其实就是:在滚动触发时计算和上次滚动距离相差了多少,当这个值小于指定值(目前是2)时,让滚动距离随时间按一定比值(目前是0.1)逐渐衰减至零。等到一段时间内的滚动距离都小于指定值时,就自动定位到正确位置。

hymbzAuteur
§
Posté le: 20/12/2023

要是还不行的话就还是用回第一版方案直接禁止滚轮翻页好了😂也辛苦你陪我一直调试了(

§
Posté le: 20/12/2023

不好意思,回得晚了,今天都在忙別的事.

剛剛我錄了一段畫面,版本 8.2.10 的
http://wan701.ueuo.com/video/scroll_test.mp4

剛載入漫畫後的第一次滾動,會直接從第 1 頁跑到 142 頁去。整個滾動過程約 1.33 秒 (程式內的 timeoutout 維持原樣 16ms,不過就算調成其它數字也沒幫助)
第二次捲頁時(觸控滑動)才會變成平常瀏覽網頁的正常速度

8.2.9 那個版本,我用起來是比較正常,除了第一次翻頁時會有替換圖片的閃動以外,整個捲頁速度都很正常

§
Posté le: 20/12/2023

若是有考慮用超長頁的話,捲頁效能方面應該可以用 CSS visibility 解決
一樣是把鄰近三頁設為 { visibility: visible },其餘的頁面隱藏 { visibility: hidden }
visibility: hidden 和 display: none 一樣是不顯示,減少 rendering.
但是 visibility 會多佔用頁面空位,所以很適合超長頁使用

hymbzAuteur
§
Posté le: 22/12/2023

回复时间无所谓啦,反正也不是什么大问题。脚本已更新修复了,上次更新可能是注意力都放在调节惯性上了,居然没发现这个 bug(

顺便再说下新版本可调节参数的行数

  • 3369里的16。数值越大,越不容易在首次滚动时闪烁
  • 3077里的20。数值越大,就会越快进入减速状态
  • 3079里的0.01。数值越大,减速得越快
§
Posté le: 27/12/2023

用了幾天,大致沒問題
微調一下數值,這樣就相當貼近蘋果macOS的系統設置.

  • 3369行 維持16
  • 3077行 改成6
  • 3079行 改成 0.002


另外有隻小蟲..
正常捲到尾端後跳出結束頁面(還沒退出),這時就已經變成滾輪模式而不是滑動模式。反向捲時會一次跑很遠
http://wan701.ueuo.com/video/scroll_test2.mp4

hymbzAuteur
§
Posté le: 31/12/2023

已更新调整好数值了。不过这个 bug 我这边无法复现,但还是给结束页的滚动加了限制,结束页关闭后必须等一段时间没有滚动事件才能触发翻页,这样应该能解决这个问题。

Poster une réponse

Connectez-vous pour poster une réponse.