在带有隐藏溢出的粘性 div 中滚动内容

Question

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

问题出在图像溢出上。我能够用边框隐藏顶部的溢出（我认为这在长运行中会很好地工作）..但我不知道如何隐藏底部的溢出并仍然保持它现在具有相同的滚动行为。

最好也能以某种方式摆脱 "monitor" 底部的 space，这样它就位于容器的底部。我想该功能最终会像一个粘性 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一个。
您可以计算显示器下方容器 space 的高度。此高度将用于元素中以隐藏转义图像部分。

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

<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。将有一个基本计算变量，其值仅在 window 调整大小时才重新计算，因为在滚动期间它们不会改变。每当滚动发生时都会计算高度：

// 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

在带有隐藏溢出的粘性 div 中滚动内容

Scrolling content within a sticky div with hidden overflow

html

css

scroll

sticky