iframe添加可滚动遮罩层

当`iframe`的内容过多导致无法在容器内完全展示，或者需要保护用户隐私时，我们可能会添加一个可滚动的遮罩层（也称为滚动条、滚动罩）来处理这种情况。这个遮罩层通常是透明的，并允许用户在其上滚动查看`iframe`内的内容。下面是一个基本的实现步骤：

1. **HTML结构**：

   <div class="scroll-mask">
     <iframe id="myIframe" src="your-url-here"></iframe>
   </div>

2. **CSS**：

   .scroll-mask {
      position: relative;
      overflow: auto;
      height: 100%;
      width: 100%;
      background-color: rgba(0,0,0,0.5); /* 设置半透明黑色作为遮罩颜色 */
   }
   #myIframe {
      width: 100%;
      height: 100%;
   }

3. **JavaScript (可选)**，用于处理遮罩层的滚动同步：

   const iframe = document.getElementById('myIframe');
   const mask = document.querySelector('.scroll-mask');

   mask.addEventListener('scroll', function() {
      iframe.scrollTop = mask.scrollTop;
   });

   // 同理，也可以设置mask的scrollTop影响iframe
   iframe.addEventListener('scroll', function() {
      mask.scrollTop = iframe.scrollTop;
   });