jQuery使水平滚动页面太大

Question

我正在为客户制作侧滚动博客文章页面。 经过多次试验和错误，我最终使用JQuery使网站滚动到右侧（如果网站很大），或者向上或向下滚动（如果它是移动的）。 唯一的问题是，当文档最初在非移动浏览器中加载时，其宽度为40,000px。 这是代码。

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

然后页面的主体本身...

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

调整页面大小后，它可以正常工作。 对于小屏幕，onload很好。 只有页面初始加载时它才在大屏幕上。 有什么想法吗？

Answer 1

您将所有图像宽度与以下代码相加：

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

然后将您的html / body宽度设置为该数字。

因此，如果页面的宽度为40,000px，则allImgWidth等于。 检查以确保页面上没有$('article img')选择器附带的其他图像。