Fancybox сбрасывает положение прокрутки макета с разделенным экраном - PullRequest
Новая
       24

Fancybox сбрасывает положение прокрутки макета с разделенным экраном

0 голосов
/ 26 сентября 2019

В моем макете есть два прокручиваемых столбца, содержащие текст и миниатюрные изображения, отображаемые с помощью 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;    
}

Я пробовал варианты автофокуса и backFocus в Fancybox, безрезультатно.Попытка удаления прокручиваемых столбцов, получить ожидаемое поведение, положение прокрутки остается неизменным после закрытия наложения Fancybox.Если я уберу «html» из этого css: 

html,
body {
    height: 100%;
}

, то получу правильное поведение, но два столбца потеряют полосы прокрутки, и страница прокручивается как целое, нанося поражение моей цели.

1 Ответ

0 голосов
/ 26 сентября 2019

Ответ, связанный выше, не работает для меня (относится к fancybox 2, строка в кавычках не существует в fancybox 3)

Вместо этого я закомментировал эту строку в jquery.fancybox.css: 

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