Question

我知道有一些关于此的主题，如果这是一个重复，我道歉，但我已经尝试了90％的在线教程，他们似乎都搞砸了我。

问题：我的目标网页图片不会是视口宽度的100％，当我滚动（水平）时，我会进入我的图库，并且它们与高度匹配。我希望有这个响应，但我的登陆页面似乎总是太大，然后它反弹它们的画廊。我希望它们是屏幕的100％高度。这是我希望得到的：

<div id="container">
<div id="landingpage">
    <p>Landing Page<p>
</div>
<div id="galone" class="vert"></div>
<div id="galtwo" class="vert"></div>
<div id="galthree" class="vert"></div>
<div id="galfour" class="vert"></div>
<div id="galfive" class="vert"></div>
<div id="galsix" class="vert"></div>
</div>

http://jsfiddle.net/LSJxk/2/

非常感谢您的帮助，感谢您阅读我的问题。任何帮助都会受到欢迎！

Answer 1

你的小提琴有一些问题：

当您使用jquery时，您需要在“Framework＆amp; Extensions”窗格中包含该库
您的DOM中不存在ID为#second的元素请先查看你的小提琴

对于其余部分，您希望它具有响应性，但您也想要水平滚动。对我来说，响应是调整内容的大小，以避免水平滚动..所以我真的没有得到你想要做的...

Answer 2

从原始代码中，问题似乎是您正在寻找窗口上的垂直滚动（window.scrollY）;但由于你的内容永远不会高于窗口，所以什么也没发生。

如果你将容器包装在另一个div中，玩弄溢出，并在包装器中添加一个监听器，你可以实现你想要的（我认为）。

我用here的答案提出了一个工作小提琴：

http://jsfiddle.net/LSJxk/6/

<强> HTML：

<div id="wrap">
<div id="container">
    <div id="landingpage">
        <p>Landing Page</p>
    </div>
    <div id="galone" class="vert"></div>
    <div id="galtwo" class="vert"></div>
    <div id="galthree" class="vert"></div>
    <div id="galfour" class="vert"></div>
    <div id="galfive" class="vert"></div>
    <div id="galsix" class="vert"></div>
</div>
</div>

<强> CSS：

#wrap {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

#container {
    position: relative;
    height: 200px;
    width: 1000px; // the width of all your divs added together
}

<强> jQuery的：

var scroller = {};
scroller.e = document.getElementById("wrap");

if (scroller.e.addEventListener) {
    scroller.e.addEventListener("mousewheel", MouseWheelHandler, false);
    scroller.e.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else scroller.e.attachEvent("onmousewheel", MouseWheelHandler);

function MouseWheelHandler(e) {
    console.log('scroll');

    // cross-browser wheel delta
    var e = window.event || e;
    var delta = - 20 * (Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))));

    var pst = $('#wrap').scrollLeft() + delta;

    if (pst < 0) {
        pst = 0;
    } else if (pst > $('#container').width()) {
        pst = $('#container').width();
    }

    $('#wrap').scrollLeft(pst);

    return false;
}

请注意陷阱：听众是在鼠标滚轮上，这在触摸屏上不起作用。这将使您的网站在iPhone / iPad / Surfaces /上无用，除非您包含另一个侦听器，或者将现有的一个包含在条件中，因此它不会在启用触摸屏的设备上触发。

水平滚动我不能让这个工作

2 个答案: