Y-overflow Auto / Scroll Issue: полоса прокрутки появляется, но не удается прокрутить - PullRequest
Новая
       6

Y-overflow Auto / Scroll Issue: полоса прокрутки появляется, но не удается прокрутить

0 голосов
/ 26 октября 2018

Я пытаюсь сделать слайд-шоу с адаптивным изображением, которое показывает прокручиваемый div с js, который отображает более одной страницы контента после щелчка по изображению исходного слайда, но y-overflow: auto / scroll не работает для меня.Работающую демонстрацию с одной страницей (без прокрутки), с которой я начал, можно найти здесь: https://tympanus.net/codrops/2018/07/26/motion-reveal-slideshow/

Это может быть проблема с фиксированной высотой / положением, связанная с div-контейнером, но я слишком многонуб, чтобы понять это.Вставка в div, в которой успешно реализована прокрутка y-overflow вне контекста, перестает работать таким же образом при разборе.

Прошу прощения за любые синтаксические проблемы или избыточности, так как это мой первый пост.Любая помощь будет высоко ценится, другие потоки y-переполнения были бесполезны (или я просто не смог применить их правильно).

Полные файлы
С большим контекстом должно бытьнеобходимо:

Js Fiddle без файлов изображений
Dropbox со всеми файлами

Соответствующий HTML: 

<body>
    <main>
        <<div class="slideshow">
        <!-- first slide--> 
            <div class="slide">
            <!-- entered state -->
                <div class="preview__img-wrap"> <!-- blue -->
                <!-- reveal project-->
                <div class="preview__img-reveal"></div>
                <!-- header + content -->
                    <div class="preview__content"><!-- white -->
                        <div class="preview__img" style="background-image: url(img/1.jpg);">
                            <h6 class="preview__title">Fight Club</h6>
                            <p>You’re not your job. You’re not how much money you have in the bank...</p>
                        </div>
                        <img src='img/2.jpg' >
                        <img src='img/3.jpg' >
                        <img src='img/2.jpg' >
                    </div>
                </div>
                <!-- preview thumbnail content -->
                <div class="slide__img-wrap">
                    <div class="slide__img" style="background-image: url(img/1.jpg); "></div>
                    <div class="slide__img-reveal"></div>
                </div>
                <span class="slide__number">#01</span>
                <h6 class="slide__title">Fight Club</h6>
            </div>
            <!--  Slide navigation -->
            <nav class="slidenav">
                <button class="slidenav__item slidenav__item--prev">Previous</button>
                <button class="slidenav__item slidenav__item--next">Next</button>
                <button class="slidenav__preview">
                    <svg class="icon icon--caret">
                        <use xlink:href="#icon-caret"></use>
                    </svg>
                </button>
            </nav>
        </div>
    </main>
    <script src="js/imagesloaded.pkgd.min.js"></script>
    <script src="js/TweenMax.min.js"></script>
    <script src="js/demo.js"></script>
</body>

Соответствующий CSS: 

main {
height: 100vh;
background-color: gray;
}

.slideshow {
    position: relative;
    height: 100%;
    width: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    pointer-events: none;
    overflow: hidden;
}
.slide {
 width: 100%;
 height: 100%;
 top: 0;
 position: absolute;
 display: grid;
 grid-template-columns: 100%;
 grid-template-rows: 100%;
 align-items: center;
 justify-items: center;
 }

/*preview" container*/
.preview__img-wrap {
position: absolute; 
background-color: blue;
display: block;
height: 100vh;
opacity: 0;
}

/*scrolling div*/
.preview__content {
position: relative;
display: block;
background-color: white;
width: 100vw;
height: 100vh;
overflow: hidden;
overflow-y: scroll; /*both auto and scroll don't work*/
text-align: center;
justify-items: center;
}
...