Question

我们说我有一个这样的网页：

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

当 B 部分被观看时，我希望能够进行水平滚动以查看 B2 部分，但当其他部分在屏幕上时会出现没有水平滚动。

你们会怎么做？任何提示？

由于

Answer 1

我希望你能理解我在阅读评论时所做的事情：）

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

我的 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;
    }
}

最后 - 24行 js with jquery ：

$(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);
            }
        }
    });
});

我重新计算了滚动。

Answer 2

您可以使用Scroll Path Plugin为网站使用自定义滚动路径。

这是一个链接：http://joelb.me/scrollpath/

Answer 3

听起来你想要做的就是在这样的网格中布置你的部分：

A（空白）
B B2
C（空白）

如果是这种情况，您应该为B2添加CSS，使其相对位于右侧，并将B和B2放在＆lt; div＆gt;内。将它们保持在文档中的相同高度。您必须对部分重新排序以使其正确流动。见下文。

<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部分。

可根据屏幕上的内容进行水平滚动

3 个答案: