Question

我正在尝试制作一个响应式图像幻灯片，以显示带有js的滚动div，该div在单击初始幻灯片的图像后显示了一页以上的内容，但是y-overflow：自动/滚动不适用于我。我从这里开始的有效的一页演示（无滚动）演示可以在这里找到：https://tympanus.net/codrops/2018/07/26/motion-reveal-slideshow/

这可能是容器div的固定高度/位置属性问题，但我对此很无知。成功解析了y-overflow滚动并粘贴到div之外的div时，在解析时将以相同的方式停止工作。

请原谅任何语法问题或冗余，因为这是我的第一篇文章。任何帮助将不胜感激，其他y溢出线程也无济于事（或者我只是无法正确应用它们）。

完整文件
有更多背景信息是有必要的：

Js Fiddle without image files
Dropbox with all files

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

Y溢出自动/滚动问题：出现滚动条，但无法滚动

0 个答案: