I encountered a requirement today. This requirement is that when the content of the vue-code-diff component is too long, you need to pull it to the bottom to see the horizontal scroll bar. This question confuses me. The reason is simple: this component has not been updated for more than 2 years. At the same time, forcibly changing CSS also led to various weird problems. I finally solved it today, hereby post a solution, I hope I don’t have to worry about this problem next time.
The problem is shown in the figure below:
1. First modify the CSS style of this component
.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. Add a height to the div outside this component
<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. The most important thing is the synchronization method (this method is to synchronize horizontal scrolling and vertical scrolling)
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. I thought I was done, but there was a problem of content overflow
The solution code is as follows:
/deep/ .d2h-code-side-linenumber {
position: relative;
}
6. Finally, the problem is solved as shown in the figure:
The above is the solution to the problem. Recently, when I was thinking about a solution, I also found that a big guy copied a vue-code-diff component. He also discovered this problem. The boss recently planned to upgrade the component he wrote to have a similar problem. It is recommended to use the components of the following URL (it will reply when encountering problems, and will release new codes to solve problems in time)
gitHub address: https://github.com/Shimada666/v-code-diff