horizontal scroll I can't get this to work

Question

I know there has been some topics on this, and I apologize if this is a repeat in anyway, but I have tried probably 90% of the tutorials on-line and they all seem to mess me up.

Problem: My landing page picture will not be 100% of the viewport width, and when I scroll(horizontal) I get to my gallery, and they match the height. I want to have this responsive, but my landing page always seems to be too big and then it bounces the galleries bellow it. I want them to be 100% height of the screen. Here is what I am hoping to get:

<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/

I really appreciate your help, Thanks for reading my question. Any help would be welcomed!

Answer 1

There is some problems in your fiddle :

• As you're using jquery, you need to include the library from the pane "Framework & Extensions"
• your element with id #second doesn't exist in your DOM Please review your fiddle first

For the rest, you want to have it responsive, but you want to scroll horizontally too. For me responsive is resizing the content to avoid the horizontal scroll.. So I don't really get what you're trying to do...

Answer 2

From your original code, the problem seems to be that you're looking for a vertical scroll on the window (window.scrollY); but as your content is never taller than the window, nothing's happening.

If you wrap your container in another div, play around with the overflows, and add a listener to the wrapper, you can achieve what you want (I think).

I've used the answer from here to come up with a working fiddle:

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

Be aware of the pitfalls, though: the listener is on a mousewheel, which doesn't work on touchscreens. This will render your site useless on iPhones/iPads/Surfaces/whatever unless you include another listener, or wrap the existing one in a conditional so it doesn't fire on touchscreen-enabled devices.