vue-code-diff内容过长时需要拉到底才能显示横向滚动条（滚动条不管内容长短都要让它显示，还要同步滚动）

今天遇到了一个需求，这个需求是vue-code-diff这个组件内容过长时，需要拉到底才能看到横向滚动条。这个问题让我很纠结。原因很简单这个组件已经2年多没更新了。同时强行改CSS，也导致各种奇葩问题出现。今天终于解决了，特此发一篇解决的方案，希望下次在遇到这个问题就不用在发愁了。
问题如下图所示：

1. 首先修改这个组件的CSS样式

.d2h-file-side-diff {margin-bottom: -5px;max-height: 280px;overflow: scroll;
}
.d2h-code-side-linenumber {padding: 0 0.5rem;position: relative;line-height: 20px;height: 20px;
}

2. 给这个组件外的div加一个高度

<div class="vueCodeDiff" :class="sameDataClass?'same-data':' '" style="max-height: calc(100% - 485px);"><vue-code-diff :old-string="old_value" :new-string="new_value" :context="context"                 :outputFormat="'side-by-side'" ></vue-code-diff>
</div>

3. 最重要的就是同步方法（这个方法就是同步横向滚动和竖向滚动的）


mounted () {this.tongbu();
},methods: {tongbu() {if (document.getElementsByClassName("d2h-file-side-diff").length > 0) {let a = document.getElementsByClassName("d2h-file-side-diff");a[0].addEventListener("scroll",(e) => {a[1].scrollLeft = e.target.scrollLeft;a[1].scrollTop = e.target.scrollTop;},true);a[1].addEventListener("scroll",(e) => {a[0].scrollLeft = e.target.scrollLeft;a[0].scrollTop = e.target.scrollTop;},true);}},
}

4. 本来以为大功告成了，结果出现了内容溢出的问题

解决代码如下：

/deep/ .d2h-code-side-linenumber {position: relative;
}

6. 最后问题解决如图所示：

以上就是问题的解决方案。最近在想解决方法的时候也发现了有一位大佬仿写了一个vue-code-diff组件。他也发现了这个问题，那位大佬最近准备再升级他写的这个组件类似问题。建议用下面这个网址的组件比较好（遇到问题会回复，同时会及时发布新代码解决问题）
gitHub 地址：https://github.com/Shimada666/v-code-diff

vue-code-diff内容过长时需要拉到底才能显示横向滚动条（滚动条不管内容长短都要让它显示，还要同步滚动）相关推荐

正文内容过长时，offsetHeight的获取和监听变化
正文内容过长时,超过4行隐藏,点击全部展开,可视高度(可见高度)offsetHeight的获取和监听变化_无围之解的博客-CSDN博客核心逻辑代码 mounted() {this.$nextTick ...
elementui 表格表头换行_解决element-ui表格表头内容太长时的换行问题
在用vue+element-ui做一个后台管理系统时,遇到这样的问题, 如图: 使用el-table做一个表格,当表头内容过长时会换行,在不设置的宽度的时候每一列的宽度是等比例分配的,虽然elemen ...
【开发笔记】td标签内容过长时解决办法
开发模块功能中遇到了td内容长度过长导致布局窜位,把其他td的内容挤在一起的问题, 于是尝试了几种方式: 设置固定的td宽度,发现当内容超出td宽度范围内时还是会窜位,失败. 例:<td wid ...
表格中的内容过长时不换行，以tips方式展示
http://element-cn.eleme.io/2.0/#/zh-CN/component/table 有两点需要注意: ①el-table标签中需要添加tooltip-effect=" ...
css文本内容过长时就自动换行
没有对比就没有伤害,先看一下效果图: 1.没有添加css自动换行代码前: wc,后面的按钮都看不到! 2.添加自动换行CSS代码后: 好了,废话不多说,直接上代码: .auto-line-feed{w ...
css阻止换行_CSS中，如何处理短内容和长内容？
本文已经过原作者 shadeed 授权翻译. 当我们使用 CSS 构建布局时,考虑长短文本内容很重要,如果能清楚地知道当文本长度变化时需要怎么处理,可以避免很多不必要的问题. 在许多情况下,添加或删除 ...
echart移上去显示内容_Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法...
最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称样例: 图二是鼠标移动到名称显示的,怎 ...
Echarts X轴内容过长自动隐藏，鼠标移动上去显示全部
使用echarts图表做页面展示的时候,当X轴内容过长时,之前一直用的 '\n' 换行(将字符串根据需要分成两行来展示),这样有很大的局限性(如内容过长的话分成两行也放不下,而且也会影响美观),后 ...
echart横轴文字显示省略号_Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法...
最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称样例: 图二是鼠标移动到名称显示的,怎 ...

vue-code-diff内容过长时需要拉到底才能显示横向滚动条（滚动条不管内容长短都要让它显示，还要同步滚动）

1. 首先修改这个组件的CSS样式

2. 给这个组件外的div加一个高度

3. 最重要的就是同步方法（这个方法就是同步横向滚动和竖向滚动的）

4. 本来以为大功告成了，结果出现了内容溢出的问题

6. 最后问题解决如图所示：

vue-code-diff内容过长时需要拉到底才能显示横向滚动条（滚动条不管内容长短都要让它显示，还要同步滚动）相关推荐

最新文章

热门文章