javascript - CSS 在某些 'frame' 内显示站点部分

Question

我尝试将一些视觉变化(不同的背景或文本颜色、一些动画)应用于通过智能手机屏幕框架可见的内容

我决定这样做:

1. 将不带效果的简单站点放在底层
2. 将发生更改的网站副本放置在 position:absolute 上方，并将其隐藏在智能手机屏幕页面底部矩形 block 之外的所有位置。

我尝试使用简单的overflow:hidden，但它不起作用，因为要使用它，我必须将具有效果的站点放置在这个小框架内并将位置设置为绝对。但这个框架也绝对定位!所以我无法将不可见层拉伸(stretch)到简单的可见站点之上。

也许有人有解决方案，或者也许这样的事情应该以其他方式完成？

<div class="page">
</div>
<div class="frame">
  <div class="page-copy">
  </div>
</div>
<style>
  .frame {
     position: fixed;
     bottom:20px;
     right: 20px;
  }
  .page-copy {
    position: absolute;
    top: 0; // this positioning doesn't work because parent has position: fixed
    right: 0;
    bottom: 0;
    left: 0;
  }
</style>

Answer 1

最后，我使用了 clip-path 来动态计算剪辑路径多边形位置(因为固定剪辑路径“框架”是不真实的)。所以，我得到了一点“重”(因为不断地听滚动总是很重)和边缘不兼容的解决方案，但它在其他情况下工作得很好。

HTML

<div id="content"></div>
<div id="content-copy"></div>
<div id="phoneScreen"></div>

CSS

.content-copy {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background-color: #fff;
}
#phoneScreen {
  position: fixed;
  bottom: 0;
  right: -200px;
  width: 290px;
  height: 135px;
}

JS

function getCoords(elem) {    
    var rect = elem.getBoundingClientRect();    
    var pos = {
        top: rect.top + window.scrollY,
        left: rect.left + window.scrollX,
        bottom: rect.top + window.scrollY + elem.clientHeight,
        right: rect.left + window.scrollX + elem.clientWidth
    };    
    return pos;
}

var contentCopy = document.getElementById("content-copy");
document.addEventListener('scroll', function() {
    var phoneCoord = getCoords(document.getElementById("phoneScreen"));
    var clipPathStr = 'polygon(' + phoneCoord.left + 'px ' + phoneCoord.top + 'px, ' + phoneCoord.right + 'px ' + phoneCoord.top + 'px, ' + phoneCoord.right + 'px ' + phoneCoord.bottom + 'px, ' + phoneCoord.left + 'px ' + phoneCoord.bottom + 'px)';
    contentCopy.style.clipPath = "";
    contentCopy.style.clipPath = clipPathStr;
});