Question

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

我尝试了几件事“ 概述-y：滚动”，“ 最小高度：100％”，“ 最大高度：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

我认为您只能使用@media查询direction：landscape进行此操作，尝试将其设置为insie media：

.slider { position: relative; }

滑块元素的position: fixed可能不允许您在横向上滚动。

Answer 2

您似乎无法上下滚动，因为没有可滚动的内容。容器设置为100％，并且由于它是固定元素，因此将是视口的100％-不会更大。没有要滚动的内容。

例如，如果将.container的大小增加到120％，您将看到可以滚动。

此外，您可能希望删除关闭按钮上的下边距...这会将整个容器压下。哪些在移动设备上不是必需的（也许使用媒体查询）

固定位置：滚动

2 个答案: