水平滚动我无法得到这个工作

我知道有这方面的一些话题，我很抱歉，如果这是一个重复，但我已经试过大概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/

我真的很感谢你的帮助，感谢您阅读我的问题。任何帮助将受到欢迎！

来源

2014-03-27 Kyle_Bridges

对不起，但小提琴不起作用。 jQuery没有添加到小提琴中，没有'＃second'元素。请包括所有演示代码的问题，它可能创建一个工作示例 – andyb

从你的原代码，问题似乎是你正在寻找用于窗口上的垂直滚动（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 /上无用，除非您包含另一个侦听器，或者将其包含在条件中，以便在启用触摸屏的设备上不触发。

来源

2014-03-27 09:31:53 MassivePenguin

非常感谢你！我从来没有想过把它放在另一个“视口”的容器中谢谢！完美的作品！ –

。在你的提琴一些问题：

正如你使用jQuery，你需要包括从窗格“框架&扩展”库
你的id为#second元素没有按”吨您的DOM 存在请检查您的小提琴第一

对于剩下的，你想拥有它反应灵敏，但希望水平也滚动。对我来说，响应是调整内容的大小，以避免水平滚动..所以我真的不明白你想做什么...

来源

2014-03-27 08:55:13 ylerjen

水平滚动我无法得到这个工作

回答

相关问题