Scrollable columns and fancybox

Demonstrates problem where scroll resets to top when fancybox overlay opens

by BrewsterBuffalo

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<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 id="item_list_area" 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...

CSS

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

JavaScript

$.fancybox.defaults.autoFocus = true