有前端的大佬 指点一二 关于竖式书写?

本贴最后更新于 363 天前,其中的信息可能已经时移世异

DevTermfig09.webp

图里的竖式书写编辑器 看着挺 有感觉

想用 css 的 ** writing-mode: vertical-rl;** 来实现相同的 terminal 编辑效果,做个 h5 的复古 editor

但是碰到些问题,html + css 貌似 水平滚动时 从右到左 不会像从上到下那样 自动 滚动到最左边(从上到下 是滚动到最底部)

用 js 强行 **scrollLeft **之后 ,从右到左 跟上了,但是再从右到左就有 bug

有啥 简单点的办法么

附上我做的作业

https://codepen.io/xf86/pen/NWRPXrg

  • 排版
    6 引用 • 62 回帖
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    100 引用 • 294 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    694 引用 • 1142 回帖 • 613 关注
  • Q&A

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

    3034 引用 • 15831 回帖 • 494 关注

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • lanesun

    不太懂是什么意思,不过有一些地方大致说说。

    你的实例里并不是用的浏览器提供的 textarea,浏览器仅支持完全由 textarea 承担的文本框实现输入时自动滚动,但是如果完全使用 textarea 元素又会遇到各种各样的兼容性问题,至少我测试下来确实是这样——firefox、chrome、vivaldi 三个浏览器的表现都不太一样,甚至在 vivaldi 中普通地设置根本无法有对应的效果。所以用一个干净的 div 容纳文本,再使用一个临时的 textarea 作为输入器是没问题的,在这种情况下,在 textarea 的 input 事件上挂载句柄让父元素每次输入时水平定位到 textarea 应该就没问题了,代码并不复杂,也没有什么效率问题,浏览器基本上就是这样实现的,不太理解你说的“bug”是哪里的问题。

    其实对于这样的特殊输入方式,最好的办法是使用一个“full width”子元素容纳文本,再将父元素设置为隐藏溢出来充当视口,用以消去浏览器默认的滚动行为的同时使用脚本设计新的滚动行为。总之这种情况下,依赖于 css 构成浏览器的默认滚动行为是不稳妥的,而且效果也差强人意。