0

My layout has two scrollable columns containing text and thumbnail images that display using Fancybox 3. When the Fancybox overlay opens, the scroll position of the columns is reset to the top instead of staying where it was.

Here's the code, and jsfiddle demonstrating the issue.

<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;    
}

I tried the autoFocus and backFocus options of Fancybox, no effect. Tried removing the scrollable columns, get the expected behaviour, scroll position remains unchanged after Fancybox overlay closes. If I remove the 'html,' from this css:

html,
body {
    height: 100%;
}

then I get the correct behaviour, but the two columns loose their scroll bars and the page scrolls as a whole defeating my purpose.

Ross
  • 1

1 Answers1

0

Answer linked above does not work for me (applies to fancybox 2, the quoted line does not exist in fancybox 3)

Instead, I commented out this line in jquery.fancybox.css:

.fancybox-active {
    //height: auto;
}
Ross
  • 1