固定位置：滚动

Posted

技术标签:

【中文标题】固定位置：滚动【英文标题】：Position fixed : scrolling 【发布时间】：2019-04-25 01:44:23 【问题描述】：

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

我尝试了几件事“overview-y: scroll”、“min-height: 100%”、“max-height: 100% em>”，我什至尝试了媒体查询“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] + '"  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

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

【问题讨论】：

你的脚本有问题，我想你能在 codepen 或 jsfiddle 中 fork 吗 谢谢，我已经编辑了这个:) 【参考方案1】：

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

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

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

【讨论】：

同样的问题。谢谢，希望能找到解决办法 也许不清楚您所说的“滚动”是什么意思？您的意思是在屏幕上拖动手指以将图像幻灯片从一侧移动到另一侧吗？ 不，抱歉，我希望我可以在横向模式下使用移动设备时垂直滚动。因为我没有看到所有高度的图像。我说清楚了吗？【参考方案2】：

我认为您只能使用@media 查询orientation:landscape 来做到这一点，尝试将其设置为insie media：

.slider  position: relative;

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

【讨论】：

感谢您的回答，但这并不能解决问题。我希望滑块保持在站点其余部分上方的固定位置（弹出窗口）。谢谢

以上是关于固定位置：滚动的主要内容，如果未能解决你的问题，请参考以下文章

具有固定位置的平滑滚动标题

html 里面 div 滚动条保持在底部 及 div 位置固定。

固定位置：滚动

在某个点停止固定位置滚动？

位置固定问题[关闭]

在移动设备上滚动时保持标题位置固定