Mixed Vertical & Horizontal Scroll

http://stackoverflow.com/questions/25210948/horizontal-scrolling-available-depending-on-whats-on-screen

HTML

<article class="container-fluid">
<header class="page-header"><h1>Mixed Vertical &amp; Horizontal Scroll</h1></header>
<section id="A"><p><b>Hipster lorem ipsum</b> single-origin coffee Portland kitsch tote bag, cornhole try-hard pug banjo. Before they sold out hoodie banjo, blog sriracha Odd Future keytar Truffaut narwhal. Authentic ethnic letterpress 8-bit, disrupt Pinterest pour-over flannel artisan swag seitan Etsy normcore. Biodiesel fap PBR, slow-carb Portland forage raw denim Truffaut Pinterest lomo Bushwick sartorial brunch 90's. Ugh irony Portland, bespoke organic banjo Kickstarter fashion axe sartorial American Apparel raw denim four loko kale chips Shoreditch typewriter. Paleo bespoke Vice Portland. Photo booth Vice aesthetic, selfies kogi chia leggings 90's direct trade YOLO.</p>
	<p class="text-center">Scroll &amp; be astonished.<br/><span class="glyphicon glyphicon-chevron-down"></span></p></section>
<div class="wrap">
	<div class="pan">
		<section id="B"><h2>Two sections</h2><p>Small batch tofu distillery Kickstarter. Selvage Neutra pop-up messenger bag banjo asymmetrical. Jean shorts Vice literally ethical meh. Cray photo booth pickled, single-origin coffee tousled authentic Bushwick meggings Pitchfork readymade. Salvia cliche actually selfies, gentrify church-key put a bird on it Etsy banh mi roof party gastropub kale chips Pinterest Carles. Umami vegan literally deep v. IPhone church-key McSweeney's bitters try-hard lomo, letterpress hella 8-bit master cleanse chambray artisan.</p>
		</section>
		<section id="B2"><img src="https://milieuforager.com/wp-content/uploads/2018/06/Dusk_thumbnail.jpg" width="750px" height="750px" /></section>
    <section id="B3"><b>B3. </b>YOLO kitsch synth, lo-fi literally organic mixtape Wes Anderson brunch pug semiotics photo booth Helvetica occupy. Selvage sriracha squid pour-over church-key. Actually next level American Apparel, organic salvia shabby chic ugh chambray Neutra church-key gluten-free Brooklyn squid...

SCSS

@mixin prefixer($name, $argument) {
    -webkit-#{$name}: #{$argument};
    -ms-#{$name}: #{$argument};
    -moz-#{$name}: #{$argument};
    -o-#{$name}: #{$argument};
    #{$name}: #{$argument};
}
article.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
article {
    section {
        position: relative;
        padding-bottom: 2em;
        float: left;
        width: 100%;
    }
    .wrap {
        width: 100%;
        overflow: hidden;
        position: relative;
        .pan {
            width: 360vw; /* how does this get calculated? */
            height: 300px;
            position: relative;
            section {
                width: 90vw;
                img {
                  width: auto;
                  height: 300px;
                }
            }
        }
    }
    footer {
        padding-bottom: 1em;
    }
}

/* CSS3 Animation for scroll 
article, .pan {
    @include prefixer(transition, all 333ms ease-out);
} */

JavaScript

$(document).ready(function(){
    var h = $(window).height(),
        pan = $(".pan").width()/2,
        offset = Math.abs(h - $(".wrap").height()) / 2,
        start = $(".wrap").offset().top - offset,
        stop = start + pan;
    cl(offset);
    $("body").css("height", $("body").height() + pan + "px");
    $("article").addClass("fixed");
    $(window).scroll(function(e){
        var scroll = $(this).scrollTop();
        if(scroll < start){
            $("article").css("margin-top", 0-scroll);
            $(".pan").css("margin-left", 0);
        } else {
            if(scroll <= stop){
                $("article").css("margin-top", 0-start);
                $(".pan").css("margin-left", 0-scroll+start);
            } else {
                $("article").css("margin-top", 0-scroll+pan);
                $(".pan").css("margin-left", 0-pan);
            }
        }
    });
});
function cl(x){console.log(x)};