如何在不使用iframe或库的情况下创建剪切显示窗口区域

How to create a clipping display window area without using an iframe or a library?

本文关键字：创建 情况下 显示 区域 窗口 iframe      更新时间：2023-09-26

我有一个项目，它包含一个带边框的div，我想在其中动态显示一些表示可视化数据点的其他div元素。我使用javascript创建元素并定位它们没有问题，但我现在正试图将它们限制在"displaydiv"中。我已经研究了一些裁剪和屏蔽的想法，但我不确定它是否适用（其中很多都处理实际图像——这里我不适用）。以下是我正在构建的页面的简化表示：

CSS：

#info {
    width:100px;
    height:100px;
    float:left;
    display:inline-block;
    border: 2px solid blue;
}
#display {
    width:400px;
    height:300px;
    display:inline-block;
    border: 1px solid black;
}
#data {
    position:absolute;
    width:100px;
    height:100px;
    border-radius:100px;
    background:green;
    left:70px;
    top:30px;
}

HTML:

Div Window Test<br>
<br>
<div id="info">Info Sidebar<br></div>
<div id="display">
    <div id="data"></div>
</div>

如您所见，有一个黑色边框的显示区域，以及一个浮动的绿色圆形元素，用于表示在显示内部绘制的数据点。如图所示，数据点div部分位于显示器之外。会有很多不同大小和位置的数据点——有些在显示器内部，有些在显示器外部（甚至有些在浏览器窗口之外）。我想要的是以某种方式限制/屏蔽数据点，以仅显示在displaydiv边界内呈现的内容。有没有一种简单的方法可以使用CSS或掩码来做到这一点？

这就是你想要的吗？

在下面的示例中，我添加了position: relative;，以使您的绝对定位的子元素与#display元素相关，并添加overflow: hidden;，以切断任何溢出的部分。

#info {
  width:100px;
  height:100px;
  float:left;
  display:inline-block;
  border: 2px solid blue;
}
#display {
  width:400px;
  height:300px;
  display:inline-block;
  border: 1px solid black;
  position: relative;              /*  added  */
  overflow: hidden;                /*  added  */
}
#data {
  position:absolute;
  width:100px;
  height:100px;
  border-radius:100px;
  background:green;
  left:70px;
  top:-30px;
}
Div Window Test<br>
<br>
<div id="info">Info Sidebar<br></div>
<div id="display">
    <div id="data"></div>
</div>

相关文章：