javascript - 获取元素和视口(viewport)右侧之间的距离以在滚动时更改 div 的宽度

Question

我有一个我无法解决的小问题。
我已经在谷歌上冲浪了一个多小时，但我无法解决。 (我不太擅长 Javascript)

嗯是的。我有一个水平滚动页面。 (没有嵌入水平滚动的代码，让我们只使用滚动条)。我想要一个“起点”-DIV，宽度和长度为 100%，包含一个图像。在该 div 的右侧将有内容(动态可调整的内容量)。现在，我希望该图像(在 GIF 中显示为“内容”)在 DIV 内居中。当我滚动时，我希望 div 变小(看起来应该像常规滚动一样，除了 div 实际上并没有移出视口(viewport))。在大约 400 像素时它应该停止缩小，只显示图像中心的一部分。
所以 - GIF 的图像 1 是它通常的样子。 GIF 的图像 2 是我希望它发生的方式。 这当然应该响应地工作。 我已经完成了一些工作，我基本上知道如何去做，但我可能只是不太擅长 Javascript 来解决它。

Here's my approach so far. -> jsfiddle

var scrollVal = Math.max(window.pageXOffset,0); /* THIS IS WRONG */
var viewport = window.innerWidth;

var windowsize = viewport - scrollVal;

$("#contentdiv").css({"width" : windowsize + "px"});

如您所见，我基本上只获得了视口(viewport)的大小以及(我认为的)视口(viewport)偏移和 div 之间的偏移。然后我从视口(viewport)中减去偏移量。 这里出了什么问题:偏移量是从左侧滚动的距离，每次更改 DIV 宽度时都会发生变化。据我猜测，我需要 DIV 右侧和视口(viewport)右端之间的距离。但我就是无法理解它。

一些帮助将不胜感激!很抱歉文本太长。

Answer 1

我自己解决的!这是更新的 JSfiddle。 https://jsfiddle.net/04dn5x6g/2/

#contentdiv {
width:100vw;
height:100vh;
position: fixed;
background-color: black;
z-index:100;
}

#else {
position: absolute;
left:100%;
height:100vh;
display: inline-block;
white-space: nowrap;
}

这是固定的位置。