jQuery使水平滚动页面太大

Question

I am making a side scrolling blog post page for a client. After much trial and error I have ended up using JQuery to make the site scroll to the right if it's large or scroll up and down if it's mobile. Only problem is when the document loads initially in a non-mobile browser it is 40,000px wide. Here is the code.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<script>
    (function($){
        var windowH = $(window).height();
        var windowW = $(window).width();

        $(window).on('load', function(){
            if(windowW >= windowH) {//this is horizontal
                var allImgWidth = 0;
                $('article img').each(function(){
                    allImgWidth += $(this).width() + 10 ;//10 is padding
                });
                $('html, body').width(allImgWidth);   //makes page width of all images and padding that I have set elsewhere
                $('article img').height(windowH - 150);//this accounts for header height and margin height from top

                // $('article img').css('margin-left', '10px');
            } else {
                $('article img').width(windowW);//if window width is not greater than window height, the images are the width of the original window
            }

            if(windowW >= windowH) {
                (function() {
                    function scrollHorizontally(e) {
                        e = window.event || e;
                        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
                        document.documentElement.scrollLeft -= (delta*80); // Multiplied by 80 (increases speed of scroll)
                        document.body.scrollLeft -= (delta*80); // Multiplied by 80
                        e.preventDefault();
                    }

                    if (window.addEventListener) {
                        // IE9, Chrome, Safari, Opera
                        window.addEventListener("mousewheel", scrollHorizontally, false);
                        // Firefox
                        window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
                    } else {
                        // IE 6/7/8
                        window.attachEvent("onmousewheel", scrollHorizontally);
                    }
                })();//function scrollHorizontally ends
            } else {
            }//else ends
        });//onload ends 

        $(window).resize(function(){
            var windowH = $(window).height();
            var windowW = $(window).width();

            if(windowW >= windowH) { //horizontal
                var allImgWidth = 0;
                $('article img').each(function(){
                    allImgWidth += $(this).width() + 11 ;
                });
                $('html, body').width(allImgWidth);   
                $('article img').height(windowH - 150);
                $('article img').css('width','auto');//dynamically resizes pics
                $('article img').css('margin-left', '9px');
            } else { //vertical
                $('html, body').width(windowW);  
                $('article img').width(windowW);
                $('article img').css('height','auto');
                $('article img').css('margin-top', '10px');
            }

            if(windowH >= windowW) {
                $(window).on('mousewheel DOMMouseScroll', function(event){
                    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
                        // scroll up
                    } else {
                        // scroll down
                    }
                });
            } else {
                $(window).off('mousewheel DOMMouseScroll');
                (function() {
                    function scrollHorizontally(e) {
                        e = window.event || e;
                        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
                        document.documentElement.scrollLeft -= (delta*80); // Multiplied by 80 (increases speed of scroll)
                        document.body.scrollLeft -= (delta*80); // Multiplied by 80
                        e.preventDefault();
                    }

                    if (window.addEventListener) {
                        // IE9, Chrome, Safari, Opera
                        window.addEventListener("mousewheel", scrollHorizontally, false);
                        // Firefox
                        window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
                    } else {
                        // IE 6/7/8
                        window.attachEvent("onmousewheel", scrollHorizontally);
                    }
                })();//function scrollHorizontally ends
            }
        });//window resize ends   
    })(jQuery);//full function ends
</script>

And then the body of the page itself...

<div id="page-wrap">
    <article class="post">
        <img src="assets/images/tumblr_nqvdnry3Du1ttpk3mo1_1280.jpg">
        <p>This is a caption!</p>
    </article>
    <article class="post">
        <img src="assets/images/tumblr_nqvdktfpUS1ttpk3mo3_1280.jpg">
        <p>This is a caption!</p>
    </article>
    <article class="post">
        <img src="assets/images/tumblr_nqvdktfpUS1ttpk3mo2_1280.jpg">
        <p>This is a caption</p>
    </article>
    <article class="post">
        <img src="assets/images/tumblr_nqvdktfpUS1ttpk3mo1_1280.jpg">
        <p>this is a caption</p>
    </article>
    <article class="post">
        <img src="pictures/photo3.jpg">
    </article>
    <article class="post">
        <img src="pictures/photo4.jpg">
    </article>
    <article class="post">
        <img src="pictures/photo5.jpg">
    </article>
    <article class="post">
        <img src="pictures/photo6.jpg">
    </article>
    <article class="post">
        <img src="pictures/photo7.jpg">
    </article>
    <article class="post">
        <img src="pictures/photo7.jpg">
    </article>
    <article class="post">
        <img src="pictures/photo7.jpg">
    </article>
    <article class="post">
        <img src="pictures/photo7.jpg">
    </article>
    <article class="post">
        <img src="pictures/photo7.jpg">
    </article>
    <article class="post">
        <img src="pictures/photo7.jpg">
    </article>
    <article class="post">
        <img src="pictures/photo7.jpg">
    </article>
    <article class="post">
        <img src="pictures/photo7.jpg">
    </article>
    <article class="post">
        <img src="pictures/photo7.jpg">
    </article>
    <article class="post">
        <img src="pictures/photo7.jpg">
    </article>
    <article class="post">
        <img src="pictures/photo7.jpg">
    </article>
    <article class="post">
        <img src="pictures/photo1.jpg">
    </article>
</div>

When the page is resized, it works fine. And onload is fine for small screens. It is only in the large screen when the page initially loads that it is this big. Thoughts?

Answer 1

You're adding all of the image widths together with this code:

$('article img').each(function(){
    allImgWidth += $(this).width() + 11 ;
});

and then setting your html/body width to that number.

So, if the width of the page is 40,000px then that is what allImgWidth equals. Check to make sure there are not other images on the page that are being included with the $('article img') selector.