html - 在带有隐藏溢出的粘性 div 中滚动内容
问题描述
所以,我试图找出一种很酷/不同的方式来展示与长静态图像不同的完整网页设计。我的目标是有一个“监视器”图形棒,而当用户滚动时,图像(完整的网页)在其中流动。我通过在其下方流动图像的位置粘性“监视器”图形来解决它。我喜欢它如何滚动内容,然后在完成后将部分向上推。
问题在于图像溢出。我能够用边框隐藏顶部的溢出(我认为从长远来看会很好)..但我不知道如何隐藏底部的溢出并仍然保持相同的滚动行为现在有。
如果能以某种方式摆脱“监视器”底部的空间,使其位于容器的底部,那就太好了。我想这个功能最终会像一个粘性 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>
解决方案
不幸的是,使用overflow: hidden
并position: sticky
破坏了粘性效果。
处理溢出和位置:sticky
它极大地限制了 CSS 解决方案。目前,我只能在 JavaScript 中思考。
您可以计算显示器下方容器空间的高度。此高度将在元素中用于隐藏转义图像部分。
首先,在sticky-monitor
. 让我们为它设置.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
推荐阅读
- api - 导出函数 dart 之外的数据
- vuejs2 - 无法读取未定义的 VueJS Firebase 的属性“forEach”
- visual-studio - 请识别此 Visual Studio 标志
- google-cloud-platform - 在 GCP Composer 中增加单个节点的内存
- javascript - 模仿 [colA] 和 [colB] 之间的 [condition] 续集
- azure - 从 Cosmos DB 获取详细信息的更快查询
- ios - PDFDocument中的变音符号不敏感搜索
- interface - 使用接口导出函数 - F#
- java - 无法删除或更新父行外键约束失败 JPA Spring Boot
- typescript - TypeScript:获取联合可能类型的名称(作为字符串)?