Split screen reverse scroll with images positioned parallel to each other - html

Question

I am trying to create a split screen scroll.
I need to position the image from the first column exactly parallel to the image from the second column.
It has to start and finish with both images completly visible on the screen.
My problem is that when it starts and finishes the images are not aligned (a bit of one image is not visible).
It only works randomly on some resolutions.
The left column works with the default native browser scroll.
The second column which is fixed positioned is working by taking the the number of pixels scrolled then multiplied by minus one.
https://codepen.io/victoreugen2002/pen/QWdJzdB
$(window).on('scroll', function() {
$(".column-right").css('bottom', $(window).scrollTop() * -1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="full-page">
<div class="column-left">
<div class="image">
<img src="https://picsum.photos/200/300">
</div>
<div class="image">
<img src="https://picsum.photos/200/300">
</div>
<div class="image">
<img src="https://picsum.photos/200/300">
</div>
</div>
<div class="column-right">
<div class="image">
<img src="https://picsum.photos/200/300">
</div>
<div class="image">
<img src="https://picsum.photos/200/300">
</div>
<div class="image">
<img src="https://picsum.photos/200/300">
</div>
</div>
</div>
<style>
.full-page .column-left {
margin-top: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
}
.full-page .column-right {
justify-content: space-between;
width: 100%;
box-sizing: border-box;
padding-left: 30px;
padding-right: 30px;
width: 50%;
left: 50%;
position: fixed;
display: flex;
flex-direction: column-reverse;
bottom: 0;
}
.image {
width:496px;
}
.image img {
width: 100%;
}
</style>