水平滚动取决于什么's屏幕

Horizontal scrolling available depending on what's on screen

本文关键字：屏幕 滚动 取决于 什么 水平      更新时间：2023-09-26

假设我有一个这样的网页:

<header>...</header>
<body>
  <section id="A">...</section>
  <section id="B">...</section>
  <section id="B2">...</section>
  <section id="C">...</section>
</body>
<footer>...</footer>

当部分B被查看时，我希望能够做一个水平滚动来查看部分B2，但是当其他部分在屏幕上时，将没有水平滚动。

你们会怎么做?有没有提示?

谢谢

我希望你能理解我所做的评论:)

结果:http://jsfiddle.net/Tymek/8kvk91kz/

我的<<p> strong> HTML : 
<head></head>
<body>
<article>
<header>…</header>
<section id="A">…</section>
<div class="wrap">
    <div class="pan">
        <section id="B">…</section>
        <section id="B2">…</section>
    </div>
</div>
<section id="C">…</section>
<footer>…</footer>
</article>
</body>

SCSS : 

article.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
article {
    section {
        position: relative;
        padding-bottom: 2em;
        float: left;
        width: 100%;
    }
    .wrap {
        width: 100%;
        overflow: hidden;
        position: relative;
        .pan {
            width: 200%; /* <- Space for two sections here */
            position: relative;
            section {
                width: 50%;
            }
        }
    }
    footer {
        padding-bottom: 1em;
    }
}
最后-用jquery编写24行js : 
$(document).ready(function(){
    var h = $(window).height(),
        pan = $(".pan").width()/2,
        offset = Math.abs(h - $(".wrap").height()) / 2,
        start = $(".wrap").offset().top - offset,
        stop = start + pan;
    $("body").css("height", $("body").height() + pan + "px");
    $("article").addClass("fixed"); // Taking control over scroll
    $(window).scroll(function(e){
        var scroll = $(this).scrollTop();
        if(scroll < start){ // Above horizontal section
            $("article").css("margin-top", 0-scroll);
            $(".pan").css("margin-left", 0);
        } else {
            if(scroll <= stop){ // Scrolling horizontally
                $("article").css("margin-top", 0-start);
                $(".pan").css("margin-left", 0-scroll+start);
            } else { // Below horizontal section
                $("article").css("margin-top", 0-scroll+pan);
                $(".pan").css("margin-left", 0-pan);
            }
        }
    });
});

我重新计算了滚动

您可以使用滚动路径插件为网站使用自定义滚动路径。

这里有一个链接:http://joelb.me/scrollpath/

听起来你想做的是像这样在网格中布局你的部分:


(空白)B2 B
C(空白)

如果是这种情况，你应该为B2添加CSS，使其相对位置在右边，并将B和B2放入

使它们在文档中保持相同的高度。你必须重新排列这些部分，让它正确地流动。见下文. 
<section id="A">...</section>
<div>  
  <section id="B2" style="float:right">...</section>
  <section id="B">...</section>
</div>  
<section id="C">...</section>

你还必须设置A, B和C部分的宽度，使它们是你的阅读区域的全宽度。这样B2就在阅读区之外，你可以滚动。
注意:水平滚动条将始终存在。如果你在a或c附近，右边会有一个空白区域。如果这还不够好，你需要使用Javascript在需要时隐藏和显示B2部分。

相关文章：