水平滚动我无法让它工作答案

【问题标题】：horizontal scroll I can't get this to work水平滚动我无法让它工作
【发布时间】：2014-03-27 08:46:44
【问题描述】：

我知道有一些关于这方面的话题，如果这是重复的话，我深表歉意，但我已经尝试了大约 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/

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

【问题讨论】：

对不起，小提琴不起作用。 jQuery 没有添加到小提琴中，也没有 #second 元素。请在问题中包含所有演示代码，它可以创建一个工作示例

标签： jquery css responsive-design horizontal-scrolling

【解决方案1】：

从您的原始代码来看，问题似乎是您正在寻找窗口上的垂直滚动（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】：

你的小提琴有一些问题：

当您使用 jquery 时，您需要从“框架和扩展”窗格中包含库
您的 DOM 中不存在 ID 为 #second 的元素请先检查您的小提琴

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

【讨论】：