固定位置:滚动

Question

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

我尝试了几个东西“概述-y:滚动”，“最小高度: 100%"，”最大高度: 100%"，我甚至尝试过媒体查询“定位:景观”。

链接到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>

链接

​

我希望你能帮助我。先谢谢你，祝你今天愉快

Answer 1

你不能上下滚动，因为没有什么可滚动的。容器被设置为100%，因为它是一个固定的元素，这将是视口的100% -没有更大。没有什么可滚动的。

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

另外，你可能要移除你关闭按钮上的边距底部.这把整个容器都压下来了。这在移动上不应该是必需的(可能使用媒体查询)

Answer 2

我认为您只能使用@media查询方向:景物，尝试将其设置为insie媒体：

.slider { position: relative; }

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