javascript - 固定位置 : scrolling

Question

我正在为平面设计师创建一个网站。我需要创建一个响应式 slider ，当您单击图形时它会出现在固定位置。因此，单击时，会打开一个 div 并出现 slider 。在我的 JS 代码中，我使用图像必须出现的数据进行搜索，因此我定义了 slider 的大小并启动​​它。唯一的问题是当手机处于横向模式时，我无法在 slider 上滚动。

我尝试了几种方法 "overview-y: scroll", "min-height: 100%", "max-height: 100%”，我什至尝试使用媒体查询“orientation: landscape”

Link to JSFiddle

我给你一些代码并给你留下问题网站的链接。

function reset() {
    $('.slider_list').empty();
    $('.slider ul').css({
        marginLeft: 0,
        left: 0,
        width: 0,
        height: 0,
    });
    $('.slider_content').css({
        width: 0,
        height: 0
    });
    $('.toLeft').css('visibility', 'visible');
    $('.slider_navigation').css('display', 'flex');
}

$(".work_figure").click(function () {

    var objet = {
        graphique1: ['https://artfeuille.fr/img/graphisme/slider-graphisme-1a.png', 'https://artfeuille.fr/img/graphisme/slider-graphisme-1b.png', 'https://artfeuille.fr/img/graphisme/slider-graphisme-1c.png'],
        graphique2: ['https://artfeuille.fr/img/graphisme/slider-graphisme-2.png'],
        graphique3: ['https://artfeuille.fr/img/graphisme/slider-graphisme-3a.png', 'https://artfeuille.fr/img/graphisme/slider-graphisme-3b.png', 'https://artfeuille.fr/img/graphisme/slider-graphisme-3c.png'],
        graphique4: ['https://artfeuille.fr/img/graphisme/slider-graphisme-4a.png', 'https://artfeuille.fr/img/graphisme/slider-graphisme-4b.png'],
        graphique5: ['https://artfeuille.fr/img/graphisme/slider-graphisme-5.png'],
        graphique6: ['https://artfeuille.fr/img/graphisme/slider-graphisme-6a.png', 'https://artfeuille.fr/img/graphisme/slider-graphisme-6b.png'],
        graphique7: ['https://artfeuille.fr/img/graphisme/slider-graphisme-7.png'],
        graphique8: ['https://artfeuille.fr/img/graphisme/slider-graphisme-8.png']
    };
    
    reset();

    var name = $(this).data("name");
    var number = $(this).data("number");
    var table = name + number;
    var table2 = [];

    for (key in objet) {
        if (key === table) {
            table2 = objet[key];
        }
    }

    indexLenght = table2.length;


    for (var i = 0; i < indexLenght; i++) {
        $('.slider_list').append('<li class="slider_items"><img src="' + table2[i] + '" alt="Ca fonctionne" class="slider_img" /></li>');
    }
    
    
    $('.slider').css('height', '100%');


    var slideCount = $('.slider ul li').length;
    var slideWidth = $('.slider ul li img').width();
    var slideHeight = $('.slider ul li img').height();
    var slideTotalWidth = slideCount * slideWidth;
    


    if (slideCount > 2) {
        $('.slider ul li:last-child').prependTo('.slider ul');
        $('.slider ul').css('margin-left', -slideWidth);
    } else if (slideCount > 1) {
        $('.toLeft').css('visibility', 'hidden');
    } else {
        $('.slider_navigation').css('display', 'none');
    }


    $('.slider .slider_content').css({
        width: slideWidth,
        height: slideHeight
    });

    $('.slider ul').css({
        width: slideTotalWidth,
        height: slideHeight
    });


    function nextSlide() {
        $('.slider ul').animate({
            left: slideWidth
        }, 500, function () {
            $('.slider ul li:last-child').prependTo('.slider ul');
            $('.slider ul').css('left', '');
        });
    }

    function previousSlide() {
        $('.slider ul').animate({
            left: -slideWidth
        }, 500, function () {
            $('.slider ul li:first-child').appendTo('.slider ul');
            $('.slider ul').css('left', '');
        });
    }


    $(".toLeft").unbind('click').click(function () {
        nextSlide();
    });

    $(".toRight").unbind('click').click(function () {
        previousSlide();
    });

      $(document).on('keydown', function (e) {
            var touche = e.keyCode;
            if (touche === 39) {
                previousSlide();
            } else if (touche === 37) {
                nextSlide();
            }
        });
    
});


$(".slider_close").click(function () {
    $('.slider').css('height', '0');
});

/* Slider section */

.slider {
    position: fixed;
    top: 0%;
    bottom: 0%;
    left: 0%;
    height: 0%;
    width: 100%;
    background: url('../img/bg_header.png') no-repeat center center fixed;
    background-size: cover;
    z-index: 99999;
    overflow-y: scroll;
    transition: all .3s ease-in-out;
}

.slider .container {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
}

.slider_close {
    color: #FFF;
    font-size: 30px;
    font-family: 'OpenSans SemiBold', sans-serif;
    float: right;
    margin-bottom: 100px;
}

.slider_content {
    overflow: hidden;
    margin: 0 auto;
    position: relative;
}

.slider_navigation {
    position: absolute;
    top: 55%;
    left: 0;
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.icons_slider {
    font-size: 50px;
}

.slider_list {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.slider_items {
    float: left;
    display: block;
    position: relative;
}

.slider_list img {
    width: 901px;
    height: 675px;
}

@media screen and (max-width: 992px) {    
    .slider_list img {
        width: 700px;
        height: 525px;
    }
}

@media screen and (max-width: 768px) { 
    .slider_list img {
        width: 320px;
        height: 240px;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Slider section -->
    <div class="slider">
        <div class="container">
            <a href="javascript:void(0)" class="slider_close"><i class="fas fa-times icons_slider"></i></a>
            <div class="slider_content">
                <ul class="slider_list" id="slide_content">
                </ul>
            </div>
            <nav class="slider_navigation">
                <a href="javascript:void(0)" class="toLeft icons_slider"><i class="fas fa-caret-left"></i></a>
                <a href="javascript:void(0)" class="toRight icons_slider"><i class="fas fa-caret-right"></i></a>
            </nav>
        </div>
    </div>

The link

我希望你能帮助我。提前谢谢你，祝你有美好的一天

Answer 1

您似乎无法上下滚动，因为没有可滚动的内容。容器设置为 100%，因为它是一个固定元素，这将是视口(viewport)的 100%——不会更大。没有可滚动到的内容。

例如，如果您将 .container 的大小增加到 120%，您将看到您将能够滚动。

此外，您可能想移除关闭按钮上的边距底部……这会将整个容器向下推。这在移动设备上不是必需的(可能使用媒体查询)