在视口的元素和右侧之间获得距离以在滚动时改变div的宽度

Question

我有一点我无法解决的问题。我已经在谷歌上浏览了一个多小时，我无法解决问题。 （我不是很擅长Javascript）

是的。我有一个水平滚动页面。 （未嵌入水平滚动的代码，让我们只使用滚动条）。我希望有一个＆＃34;起点＆＃34; -DIV，宽度为100％＆amp;长度，包含图像。在该div的右侧将有内容（动态可调节的内容量）。现在，我希望该图像（显示为＆＃34;内容＆＃34;在GIF中）在DIV内居中。当我滚动时，我希望div变小（这应该看起来像常规滚动，除了div实际上没有移出视口）。然后在400px左右它应该停止收缩，只显示图像中心的一部分 所以 - 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"});

正如你所看到的，我基本上只得到了视口的大小和（我认为的）视口和div的偏移之间的偏移。然后我从视口中减去了偏移量。 这里有什么问题：偏移是从左边滚动的距离，每次改变DIV宽度时都会改变。据我所知，我需要DIV右侧和视口右端之间的距离。但我无法绕过它。

一些帮助将不胜感激！对不起，我很抱歉。

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;
}

这是固定的位置。

Answer 2

我不确定这是否是理想的结果，但我做到了这一点：

var contW = $("#contentdiv").width();
$(window).scroll(function(){
    var winPos = $(window).scrollLeft();
    var newW = contW - (winPos * 3); // change 3 to change the 'speed' of the overlap

    if(newW > 400) {
        $("#contentdiv").css('margin-left',winPos+"px");
        $("#contentdiv").width(newW+"px");
    }
});

在函数之前取#contentdiv的宽度。然后函数使用窗口的scrollLeft()位置（速度乘以3）使其重叠。

为确保#contentdiv的左侧保持原位，我们会添加额外的margin-left。

它可能不是 解决方案，但我希望它可以帮助您。

Updated Fiddle

（注意：CSS改为，检查小提琴）