Fancybox 导致分屏布局滚动位置重置为顶部答案

【问题标题】：Fancybox causes split screen layout scroll position to reset to topFancybox 导致分屏布局滚动位置重置为顶部
【发布时间】：2020-01-26 04:15:48
【问题描述】：

我的布局有两个可滚动的列，其中包含使用 Fancybox 3 显示的文本和缩略图。当 Fancybox 覆盖打开时，列的滚动位置会重置到顶部，而不是停留在原来的位置。

这是代码，jsfiddle 演示了这个问题。

<body>       

  <div class="ma-spa-outer-container">                                    

  <div>
    Fixed header
  </div>

    <div class="ma-spa-inner-container">

      <div class="ma-spa-outer-container border-right">            
            <div class="ma-spa-inner-container">
                <div class="ma-spa-col">  
                     <p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>Click image below to open fancybox</p>
                     <div class="col-lg-2 col-md-4 col-6">
                      <a href="https://source.unsplash.com/pWkk7iiCoDM/400x300" class="d-block mb-4 h-100" data-fancybox="gallery" data-caption="As I open, the columns scrolled back to the top!">
                        <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/pWkk7iiCoDM/400x300" alt="">
                      </a>
                    </div>
                </div>
            </div>
        </div>

        <div id="two" class="ma-spa-outer-container border-right text-left">                                                           
            <div class="ma-spa-inner-container">                
                <div class="ma-spa-inner-container">
                <div class="ma-spa-col">  
                     <p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>scroll down</p><p>Click image below to open fancybox</p>
                     <div class="col-lg-2 col-md-4 col-6">
                      <a href="https://source.unsplash.com/pWkk7iiCoDM/400x300" class="d-block mb-4 h-100" data-fancybox="gallery" data-caption="As I open, the columns scrolled back to the top!">
                        <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/pWkk7iiCoDM/400x300" alt="">
                      </a>
                    </div>
                </div>
            </div>                                   
            </div>            
        </div>

    </div>      

  </div>         

</body>

html,
body {
    height: 100%;
}

.ma-spa-outer-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;    
}

.ma-spa-inner-container {
    display: flex;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.ma-spa-col {
    height: 100%;
    width: 100%;
    overflow-y: scroll;    
}

我试过Fancybox的autoFocus和backFocus选项，没有效果。尝试删除可滚动列，获得预期的行为，Fancybox 覆盖关闭后滚动位置保持不变。如果我从这个 css 中删除“html”：

html,
body {
    height: 100%;
}

然后我得到了正确的行为，但是这两列失去了滚动条并且页面滚动作为一个整体破坏了我的目的。

【问题讨论】：

修复：stackoverflow.com/a/17458234/3479395

标签： html css fancybox-3

【解决方案1】：

上面链接的答案对我不起作用（适用于fancybox 2，fancybox 3 中不存在引用的行）

相反，我在 jquery.fancybox.css 中注释掉了这一行：

.fancybox-active {
    //height: auto;
}

【讨论】：