我想了解一下怎样实现一种可以内容溢出显示的弹层，有什么思维方式可以实现吗？

一个网页页面，我想写出一个弹窗层，然后上面的内容可以在超过一屏内容的时候可以滑动浏览，但是我自己写的情况确实页面上出现了两个滚动条，有什么好的实现思维方式么？

结构如下：

<div class="mask">
    <div class="content">
        <p>文本内容</p>
        <p>文本内容</p>
        <p>文本内容</p>
    </div>
</div>

或者

<div class="mask"></div>
<div class="content">
    <p>文本内容</p>
    <p>文本内容</p>
    <p>文本内容</p>
</div>

这两种结构是否能够实现那种效果呢？
点击某个按钮，然后弹出一个类似蒙版的遮罩层，然后遮罩层上的内容会超过一屏显示，
遮罩层下面的为页面的基本内容，有什么方式可以保证浏览器不会出现两个滚动条，而且还能滚动浏览的思维方式？

---

如果不考虑低版本的浏览器的话，有如下方法：

建立一个弹框,其css属性为：

div {
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    position: absolute;
    top: 0;
    left: 0;
}