手机上点击图片以求放大时，页面会自动回顶部。
困扰了许多天，在网上一直找不到任何有效的解决方案！
这两天手机阅读笔记需求更大，问题的解决显得尤为重要！
仍记得Hexo Next主题中曾经用node.js装过一款图片放大开源插件（不得不感慨开源精神的强大力量），和这个主题自带的图像放大插件一模一样！！
找出以前的记录，知道了它叫fancybox。
接着，百度一波、谷歌一波，最终找到了以下教程（链接都放在了文末参考资料）：
发现，所有相关信息竟然惊人的雷同，然而，我用的项目源码里面根本没有这个！
通过谷歌翻译，大概知道了fancybox类里面某个关于图像的方法会触发overlay（覆盖）行为，从而让页面发生回顶部的操作，因此需要找到并把这种行为禁止掉。
Ctrl+U，进来搜一波：
貌似有点希望了，把这个文件揪出来看看：
Woc，，看右边你能发现貌似11行的代码包含了几万行火星文。。。
换个思路，对一个个可能相关文件进行fancybox类搜索，结合F12的帮助，发现bug的触发条件是左侧边栏被收起，花了几个小时的时间（本不会PHP、CSS的小白差点被淹死其中），终于上岸了，可谓“柳暗花明又一村”！
废话不说了，最后找到在themes/handsome/assets/css里面的handsome.min.css的
这几行代码，注释掉后随即恢复正常，嗯呐真香。
今天这波操作，确实做了很多“无用功”，确实想过要不要直接禁用功能放弃修正：
但是坚持下来后发现对typecho和php的运作原理/方式似乎有了那么些了解了。
现在，刚过了0点，心情逐渐平复下来了，不襟陷入了对开源理念的大思考，总结下来就是开源真伟大！
最后，由衷感谢Handsome，感谢Typecho等伟大开源项目！
本次踩坑日记就写到这里了，如果你读到了这里，还请多多指教！
参考资料：
https://www.wumingx.com/tools/hexo-tutorial.html
https://blog.csdn.net/wu410674496/article/details/51003144
https://blog.csdn.net/weixin_30466039/article/details/96870394
https://www.acgist.com/article/120.html
https://blog.csdn.net/weixin_30466039/article/details/96870394
https://stackoverflow.com/questions/19636654/how-lock-fancybox-overlay-without-jumping-to-the-top
版权属于：soarli
本文链接：https://blog.soarli.top/archives/347.html
转载时须注明出处及本声明。
1 条评论