水平滾動我無法得到這個工作

我知道有這方面的一些話題，我很抱歉，如果這是一個重複，但我已經試過大概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

水平滾動我無法得到這個工作

回答

相關問題