学习
实践
活动
专区
工具
TVP
写文章

markdown 编辑器实现双屏同步滚动

我发现各大社区的 markdown 编辑器基本都有同步滚动功能。只不过有些做得好,有些做得马马虎虎。出于好奇,我就打算自己亲自实现一下这个功能。 思考了一段时间,最后想出来了三种方案: 百分比滚动 双屏同时渲染占用面积大的元素 每一行的元素都赋上一个索引,根据索引来精确同步每一行的滚动高度 百分比滚动 假设现在正在滚动 a 屏,那 a 屏的滚动百分比计算方式为 当滚动 a 屏时,需要手动同步 b 屏的滚动高度,也就是根据 a 屏的滚动百分比算出 b 屏的滚动高度: a.onscroll = () => { b.scrollTo({ top: a.scrollTop 每一行的元素都赋上一个索引,根据索引来精确精确同步每一行的滚动高度 之前两个方案都属于勉强能用,不够好。现在这个第三方案就比前面两个强多了,几乎能做到精确同步每一行的内容。具体怎么做呢? 图片 这样一来,同步滚动就正常了。同理,其他的嵌套元素也一样(譬如 ul ol)。

10820
  • 广告
    关闭

    热门业务场景教学

    个人网站、项目部署、开发环境、游戏服务器、图床、渲染训练等免费搭建教程,多款云服务器20元起。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    如何实现一个能精确同步滚动的Markdown编辑器

    ,比如在编辑区域滚动时,预览区域会随着滚动,反之亦然,方便两边对照查看,如果你用过多个平台的Markdown编辑器的话可能会发现有的平台编辑器同步滚动非常精确,比如掘金、segmentfault、CSDN 等,而有的平台编辑器当图片比较多的情况下同步滚动两边会偏差会比较大,比如开源中国(底层使用的是开源的 editor.md)、51CTO等,另外还有少数平台则连同步滚动的功能都没有(再见)。 不精确的同步滚动实现起来比较简单,遵循一个等式即可: // 已滚动距离与总的可滚动距离的比值相等 editorArea.scrollTop / (editorArea.scrollHeight - editorArea.clientHeight ]; } }; 效果如下: 修复节点内滚动同步的问题 可以看到跨节点滚动已经比较精准了,但是如果一个节点高度比较大,那么在节点内滚动右侧是不会同步滚动的: 原因很简单,我们的同步滚动目前只精确到某个节点 同步滚动已经基本上很精确了,不过还有个小问题,就是当编辑区域已经滚动到底了,而预览区域没有: 这是符合逻辑的,但是不符合情理,所以当一边滚动到底时我们让另一边也到底: const onEditorScroll

    9210

    滚动怎么理解_scrollview不滚动

    本文介绍元素尺寸中内容最多的一部分——滚动scroll 滚动宽高 scrollHeight   scrollHeight表示元素的总高度,包括由于溢出而无法展示在网页的不可见部分 scrollWidth 元素未滚动时,scrollLeft的值为0,如果元素被水平滚动了,scrollLeft的值大于0,且表示元素左侧不可见内容的像素宽度   当滚动滚动到内容底部时,符合以下等式 scrollHeight ;} </script> scrollBy(x,y)   scrollBy(x,y)方法滚动当前window中显示的文档,x和y指定滚动的相对量 <body style="height:1000px"> 如果为true,表示元素的顶部与当前区域的可见部分的顶部对齐(前提是当前区域可滚动);如果为false,表示元素的底部与当前区域的可见部分的尾部对齐(前提是当前区域可滚动)。 scroll的知识,基本上囊括了关于滚动现有的所有属性和方法。

    12720

    JS判断滚动条是否停止滚动

    背景:昨天一个同事有种需求,有一个展示数据区域的div,带滚动条,当滚动滚动时,需要向后台发请求,计算数据,再拿到前台展示。         分析:由于数据量级别较大,所以当滚动滚动时,如果时时向后台发请求,对服务器和浏览器都造成巨大的压力。想到的解决方案是,当滚动条停止时,再去发请求计算数据。 那么问题来了,如何判断滚动条是否停止了呢?        解决:搜索了一下,js本身是无法判断滚动条是在滚动状态还是停止状态,只有通过其它方式了。 后来想到的思路是当滚动滚动的时候,发起一个定期执行的方法,并记录一次当前滚动条到顶部的距离,这个方法中判断此时滚动条到顶部的距离是否和上次记录的相等,如果相等,那么说明停止滚动了,不相等,还在滚动。 -- // 让浏览器出现滚动条 for(var i = 0; i < 100; i++) { document.write("
    "); } var topValue = 0,//

    2.8K00

    56.Qt-滚动字幕之无间隙滚动

    1.描述 最近要实现一个滚动条字幕,但是搜到的系列文章都是利用定时器QTimer,在固定的时间截取文本并显示,这样滚动的时候其实是断断续续的,因为实际上是一个个字符位移实现的,不过实现方便. 所以只有自己实现无间隙滚动条字幕. 2.界面展示 示例如下图所示: ? 效果图如下所示(支持自适应主界面大小,根据主界面窗口变换,自动更正文本大小,速度): ? QWidget *parent = 0); //qRgb(int r, int g, int b) void setDelay(int ms,int pixelSize); //设置滚动延迟 ,多少ms滚动多少像素点 void setText(QString text,QRgb textColor,float speed=0.70,int blankSuffix=20); //设置字体 ,调用该函数后,将会自动启动定时器来滚动字幕 void restart(); signals

    52230

    DOM的滚动

    DOM规范中并没有规定各浏览器需要实现怎样的滚动页面区域,各浏览器实现了相应的方法,可以使用不同的方式控制页面区域的滚动。这些方法作为HTMLElement类型的扩展存在,所以它能在所有元素上使用。 1、scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素。 如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐。 -------目前各浏览器均支持 2、scrollIntoViewIfNeeded(alignCenter) 只在当前元素在视窗的可见范围内不可见的情况下,才滚动浏览器窗口或容器元素,最终让当前元素可见 ---Safari、Chrome实现了这个方法 4、scrollByPages(pageCount) 将元素的内容滚动指定的页面的高度,具体高度由元素的高度决定。

    25410

    IOS 滚动字幕

    一共四种形式的滚动字幕,我们先来看第一个 水平连续滚动字幕: 这种一看就是一组view放在scrollview实现的滚动,但是如何实现循环滚动呢,思路如下 1:加入滚动字幕有五组文本,滚动到最后一组时 3:我们可以让滚动框在最后一个文本滚动消失后,重置滚动框的坐标,如此反复,就可以实现无线循环 添加UI的部分代码就不贴了,需要的可以自行下载demo //获取到最大滚动范围就可以启动滚动事件 -(void self.textScrollview setContentOffset:CGPointMake(self.scrX, 0) animated:NO]; } completion:nil]; //滚动到可滚动区域的一半时重置 : 这种的更简单,只需要一个label,只要在滚动过程中不断地改变label展示文本就可以了 1:实时计算要加载的文本的宽度,加上屏宽*2,将label放在最中间 2:每次label消失之后,更新展示文本和滚动区域 像这种第五个文本后面紧跟着第一个文本的,而且又是循环滚动的,其实思路和第一个水平滚动的是一样的,同样数据翻倍,滚动完一次重置,这样就可以实现循环 不过这里我换成了tableview来实现,没有用数组添加

    41940

    关注

    腾讯云开发者公众号
    10元无门槛代金券
    洞察腾讯核心技术
    剖析业界实践案例
    腾讯云开发者公众号二维码

    相关产品

    • 数据集成

      数据集成

      通过快速连接和融合云上或云下自建的各种数据源,提供操作轻量化、过程可视化、能力开放化的数据集成工具

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券