CSS显示部分'框架'内的网站部分

Question

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

我决定这样做：

1. 在底层放置没有效果的简单网站
2. 将带有day1更改的网站副本放在上面，并将其隐藏在页面底部的智能手机屏幕的矩形块中。



我尝试使用简单的position: absolute，但它不起作用，因为要使用它我必须将具有效果的网站放在这个小框架内并将postition设置为绝对。但这个框架也是绝对定位的！所以我无法将我看不见的图层拉伸到简单的可见网站上面。

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

overflow: hidden

Answer 1

最后，我使用clip-path动态计算剪辑路径多边形位置（因为固定剪辑路径'frame'是不真实的）。 所以，我有点'沉重'（因为不断听滚动总是很重）和Edge不兼容的解决方案，但在其他情况下它的效果非常好。

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

Answer 2

复制整个网站是一件非常疯狂的事情，可能会导致很多问题。反正！

现在发生的事情是你只看到手机内部网站的左上角，对吧？假设手机处于x：100和y：100。在这种情况下，您应该将网站的副本移回相同的距离：top: -100px; left: -100px。当手机四处移动时，动态执行此操作，它会匹配。

您还可以使用clip-path隐藏不在手机下的网站部分。同样，您需要在手机移动时动态更改此设置。

如果你可以使用mix-blend-mode达到你想要的效果，你就不必复制整个网站，一切都会简单得多。