Ctrl+ 鼠标滚轮临时调整页面宽度(js 代码)

本贴最后更新于 446 天前,其中的信息可能已经斗转星移

当文档中有大量图片时,有快捷调整页面宽度的需求。请问,能否将下面的这个设置,增加一个功能,Ctrl+ 鼠标滚轮调整页面宽度?Word、PDF 阅读器、浏览器等都有这个功能,很方便。谢谢!

image.png


使用 ChatGPT 生成了如下代码,实现了 Ctrl+ 鼠标滚轮临时调整页面宽度的功能,切换页面后,缩放失效,自动恢复成原宽度。

//Ctrl+鼠标滚轮临时调整页面宽度 document.addEventListener('wheel', function(event) { if (event.ctrlKey) { if (event.deltaY > 0) { // 向上滚动,减小padding document.querySelectorAll('.protyle-wysiwyg.protyle-wysiwyg--attr').forEach(function(element) { element.style.paddingLeft = (parseInt(element.style.paddingLeft) + 50) + 'px'; element.style.paddingRight = (parseInt(element.style.paddingRight) + 50) + 'px'; }); } else { // 向下滚动,增加padding document.querySelectorAll('.protyle-wysiwyg.protyle-wysiwyg--attr').forEach(function(element) { element.style.paddingLeft = (parseInt(element.style.paddingLeft) - 50) + 'px'; element.style.paddingRight = (parseInt(element.style.paddingRight) - 50) + 'px'; }); } } });
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    24675 引用 • 101252 回帖 • 1 关注
1 操作
wenbocn 在 2023-12-31 21:04:30 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • wenbocn via Android

    可以 ctrl+shift+ 鼠标滚轮调整字体大小

  • image.png

    这个配置有开过吗?思源笔记区的宽度不是有自适应嘛

  • 虽然没有快捷键那么方便,这个插件你试过了吗:

    (也许可以给插件仓库提个 issue,增加快捷键调节)

    image.png

    1 回复
  • wenbocn via Android

    给插件作者提 issue 被秒拒了 😂 ,但感觉这个功能挺实用的,不然 Word 等也不会都有这个功能,因此再来这儿提一下建议

    1 回复
  • 我感觉你被秒拒的原因是「使用 Ctrl+ 鼠标滚轮」,可能改为「自定义快捷键」会好一点(不过自定义快捷键就不能用鼠标滚轮了),我提个 issue:Issue #17 · frostime/siyuan-center-width

  • wenbocn

    以下代码为更新后的代码,仅更改当前活动页面的 padding 值,实现单个页面的缩放。

    /* Ctrl+鼠标滚轮临时调整页面宽度 */ document.addEventListener('wheel', function(event) { if (event.ctrlKey) { var activeElement = document.activeElement; if (activeElement.classList.contains('protyle-wysiwyg') && activeElement.classList.contains('protyle-wysiwyg--attr')) { if (event.deltaY > 0) { // 向上滚动,减小padding activeElement.style.paddingLeft = (parseInt(activeElement.style.paddingLeft) + 50) + 'px'; activeElement.style.paddingRight = (parseInt(activeElement.style.paddingRight) + 50) + 'px'; } else { // 向下滚动,增加padding activeElement.style.paddingLeft = (parseInt(activeElement.style.paddingLeft) - 50) + 'px'; activeElement.style.paddingRight = (parseInt(activeElement.style.paddingRight) - 50) + 'px'; } } } });
请输入回帖内容 ...

推荐标签 标签

  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 2 关注
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 5 关注
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 610 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 380 关注
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    12 引用 • 54 回帖 • 168 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    211 引用 • 358 回帖
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 52 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 462 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    9339 引用 • 42517 回帖 • 113 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 16 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 640 关注
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1439 引用 • 10067 回帖 • 490 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 1 关注
  • 导航

    各种网址链接、内容导航。

    43 引用 • 177 回帖
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 753 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖 • 1 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    325 引用 • 1395 回帖
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 585 回帖
  • 工具

    子曰:“工欲善其事,必先利其器。”

    295 引用 • 750 回帖
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 487 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖 • 1 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    7 引用 • 69 回帖 • 1 关注