html - 在带有 overflow hidden 的粘性 div 中滚动内容

Question

因此，我正在尝试找出一种很酷/不同的方式来显示不同于长静态图像的完整网页设计。我的目标是拥有一个“监视器”图形棒，而图像(​​完整网页)在用户滚动时在其中流动。我通过在其下方有一个图像流动的位置粘性“监视器”图形来解决它。我喜欢它在内容中滚动然后在完成后将部分向上推的方式。

问题是图像溢出。我能够用边框隐藏顶部的溢出(我认为从长远来看会很好地工作)..但我不知道如何隐藏底部的溢出并仍然保持相同的滚动行为现在。

如果能以某种方式去掉“监视器”底部的空间，让它正好位于容器的底部，那就太好了。我想该功能最终会像一个粘性 iframe，可以滚动到框架本身之外，然后在内容到达结尾后向上推。

我能做到这一点，但在保持滚动行为的同时隐藏 div 底部的溢出确实存在问题。

例子>> https://codepen.io/cjcort/pen/NWKryVa

提前致谢!

<style>
body {
    margin:0px;
}

.container-1 {
    background-color:grey;
}

.container-2 {
    background-color:lightblue;
}

.parent {
    width:50%;
    margin:0px auto;
    padding:100px 0px;
}

.sticky-monitor {
    text-align: center;
    z-index:1
}

.grey {
    border-top:70px grey solid;  
}

.blue{
    border-top:70px lightblue solid;
}

.sticky-monitor img {
    width:100%;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    z-index:4
}

.image {
    margin-top:-65%;
    text-align:center;
}

.image img {
    width:93%;
    height:1000px !important;
    margin:auto
} 


.is-sticky {
    position: sticky; 
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    top: 0; 
}
</style>



<div class="container-1">
    <div class="parent">
        <div class="sticky-monitor is-sticky grey">
            <img src="https://charliecort.com/test/computer.svg">
        </div>
        <div class="image">
            <img src="https://images.unsplash.com/photo-1563468415006-0b70ca8eb306?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" />
        </div>
    </div>
</div>

<div class="container-1">
    <div class="parent">
        <div class="sticky-monitor is-sticky grey">
            <img src="https://charliecort.com/test/computer.svg">
        </div>
        <div class="image">
            <img src="https://images.unsplash.com/photo-1563468415006-0b70ca8eb306?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" />
        </div>
    </div>
</div>

Answer 1

不幸的是，使用 overflow: hidden 和 position: sticky 会破坏粘性效果。
Dealing with overflow and position: sticky

它极大地限制了 CSS 解决方案。目前，我只能在 JavaScript 中思考。
您可以计算显示器下方容器空间的高度。此高度将用于元素中以隐藏转义图像部分。

首先，在sticky-monitor 中创建一个div。让我们为它设置 .hide-image 类:

<div class="sticky-monitor is-sticky grey">
  <img src="http://charliecort.com/test/computer.svg">
  <div class="hide-image"></div>
</div>

CSS:

.hide-image {
    position: absolute;
    width: 100%;
    background: grey;
    transform: translateY(-4px); // to fill the small gap
}

最后是计算高度的JavaSript。将有一个基本计算变量，其值仅在窗口调整大小时才重新计算，因为在滚动期间它们不会改变。每当滚动发生时都会计算高度:

// variables to get elements;
var container = document.querySelector('.container');
var monitor = document.querySelector('.container .sticky-monitor');
var hideImageElement = document.querySelector('.hide-image');

// variable for calculation later
var baseForCalc;

window.addEventListener('resize', getValuesImage);
window.addEventListener('scroll', adjustHideImage);

function getValuesImage() {
    baseForCalc = container.offsetHeight + container.offsetTop - monitor.offsetHeight;
    adjustHideImage();
}

function adjustHideImage () {
    hideImageElement.style.height = (baseForCalc - monitor.offsetTop) + 'px';
}

getValuesImage(); // get the values at least once
adjustHideImage(); // apply the values at least once