Question

我正在尝试为客户端创建一个博客帖子页面，并在Jquery的帮助下使用了一个表来使其无限制地滚动。问题是我希望它小于740px时不要侧滚动。当我搞乱jquery和resize命令时，表似乎变得很糟糕。我尝试展开td，它非常小故障。

<script>
      $(function(){
       $("#page-wrap").wrapInner("<table cellspacing='10px'><tr>");
        $(".post").wrap("<td>");
     });

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

这是附加到它的CSS

td {
        img {
            max-height: 74vh;
            max-width: 1280px;
    }
    p {
        font-size:14px;
        font-family: Gill Sans;
        margin-bottom:0;
        line-height: 1.04;
    }
}

我用vh使图像响应并成为窗口的高度。当我到达740px时，我希望它切换到向下滚动。有人建议使用jquery动态获取页面上所有图像宽度的大小，但我不能让它不包装。

Answer 1

所以我想出来但现在有另一个问题。首先是解决方案。抛弃了桌子并编写了脚本来为我修复它。

(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 

})(jQuery);//fucntion ends


(function($){
   $(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() + 10 ;
        });
        $('html, body').width(allImgWidth);   
        $('article img').height(windowH - 150);
        $('article img').css('width','auto');//dynamically resizes pics
        $('article img').css('margin-left', '10px');
      } else { //vertical
        $('html, body').scrollLeft=0;
        $('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);//function ends

现在，在初始页面加载时，该网站的宽度为40,000px。在从垂直到水平调整大小时，它很好并适合。不确定是什么导致了这一点。

响应方滚动博客页面问题

1 个答案: