javascript - 剪辑 div 也剪辑滚动

Question

我有两个 div，子 div 在父 div 中。 div child 比他的 parent 大。所以我决定在 div 父级中放置一个滚动条，因为我可以更好地看到 div 子级的内容。

问题是现在我需要在父div中使用属性clip，但是clip也会影响滚动。

我想问的是有没有什么方法可以将父 div 和滚动大小自动调整到滚动上。

遵循我的代码:

.outter{
    width:100px;
    height:100px;
    background-color:blue;
    overflow: scroll;
    position: absolute;
    clip: rect(23.75px 120px 120px 23.75px);
}

.inner{
    width:200px;
    height:200px;
    background-color:red;
    
}

<div class="outter">
  <div class="inner"></div>
</div>

[编辑]:

跟随你我假装的结果。

如果你比较上面的图片，我在上面放的片段的结果是卷轴被剪掉了，而图像没有

Answer 1

这就是 clip 属性应该做的，限制元素的可见区域。如果你试图剪辑内部元素的内容，你完全可以定位它来这样做。

希望这对您有所帮助!

.outter {
    position: relative; 
    width:160px;
    height:160px;
    background-color:red;
    overflow: scroll;
}

.inner{
    position: absolute;
    left: -40px;
    top: -40px;
    background:url('http://placekitten.com/g/400/400');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width:400px;
    height:400px;
}

<div class="outter">
  <div class="inner">
  </div>
</div>