当我的页面顶部出现一个弹出窗口时，然后使用滚动键，页面滚动，但不是弹出窗口答案

【问题标题】：when I have a popup appear on top of my page, then use the scroll keys, the page scrolls, but not the popup当我的页面顶部出现一个弹出窗口时，然后使用滚动键，页面滚动，但不是弹出窗口
【发布时间】：2019-09-09 15:46:42
【问题描述】：

我有一个常规的 php 网页。当您单击某个元素时，会出现一个包含更多内容的弹出窗口。问题是，当弹出窗口出现时，如果用户滚动，我希望弹出内容滚动。相反，当用户滚动时，弹出窗口下的网页会滚动。我试过.focus()，但它似乎不起作用。也许它只适用于表单小部件。任何人都可以提出解决方案吗？

html:

<div class="anecdote-thumb" id="anecdote-BOA">
<img src="img/story/web-21090319MMSbuildings3.jpg">
<p class="anecdote-link-p"><strong><a class="anecdote-link" href="#"  onclick="return false;" id="show-BOA">Details</a></strong></p>
</div>

<!------------------ POPUP ---------------------------------->  
<div class="popup" id="popup-BOA">
<div class="close"><i class="fas fa-times-circle"></i></div>
<!-- content here -->
<p class="text-close text-center">Close</p>
</div>  
<!------------------ END POPUP ------------>

css:

.popup {
    width: 60%;
    position: fixed;
    height:80%;
    top: 10%;
    left: 20%;
    background-color: white;
    box-shadow: 5px 5px 10px black;
    padding: 30px;
    overflow-y: scroll;
    z-index:99;
    display:none;
}

jquery：

$('.anecdote-link').on('click', function(){
        $('.mask').fadeIn();
        if ( $(this).attr('id') == "show-BOA" ) {
            $('#popup-BOA').fadeIn();
        }
});

【问题讨论】：

滚动元素将在鼠标显示的地方生效。因此，如果它不在弹出窗口上方，它将滚动页面，反之亦然。因此，除非您谈论的是用户使用键盘滚动，否则焦点将起作用。

标签： jquery css focus

【解决方案1】：

您可以禁用页面的溢出正文，例如调用弹出函数时使用这样的代码：

$('body').css('overflow','hidden');

记得恢复 - 您可以在关闭时添加此代码：

$('body').css('overflow', 'auto');

【讨论】：

这不是我想要控制的溢出。我希望焦点放在页面顶部的弹出窗口上。我希望在您开始滚动时滚动弹出窗口/
jsfiddle.net/15pyuste

【解决方案2】：

从您的示例中，您无法滚动，因为您的内容没有溢出任何内容。我使内容比高度视口多一点，并且在中间弹出窗口中似乎滚动得很好，看看这个快速演示：

$('.anecdote-link').on('click', function(){
        $('.mask').fadeIn();
        if ( $(this).attr('id') == "show-BOA" ) {
            $('#popup-BOA').fadeIn();
        }
});

body{
  height:140vh;
}

.popup {
    width: 60%;
    position: fixed;
    height:80%;
    top: 10%;
    left: 20%;
    background-color: white;
    box-shadow: 5px 5px 10px black;
    padding: 30px;
    overflow-y: scroll;
    z-index:99;
    display:none;

    height: 120vh;
}  

.close{
  height:100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div class="anecdote-thumb" id="anecdote-BOA">
        <img src="img/story/web-21090319MMSbuildings3.jpg">
        <p class="anecdote-link-p"><strong><a class="anecdote-link" href="#"  onclick="return false;" id="show-BOA">Details</a></strong></p>
        </div>
        
        <!------------------ POPUP ---------------------------------->  
        <div class="popup" id="popup-BOA">
        <div class="close"><i class="fas fa-times-circle"></i></div>
        <!-- content here -->
        <p class="text-close text-center">Close</p>
        </div> 
</body>

【讨论】：

在你的演示中它对我不起作用。同样，只有底部元素滚动，而不是弹出窗口。也许这是 Chrome 的“功能”？
什么，这很奇怪，对我来说，它在 chrome 中完全可以正常工作，弹出窗口滚动但不是 body 元素。