html - Fancybox 导致分屏布局滚动位置重置为顶部

问题描述

我的布局有两个可滚动的列，其中包含使用 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%;
}

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

标签： htmlcssfancybox-3

html - Fancybox 导致分屏布局滚动位置重置为顶部

问题描述

解决方案

推荐阅读