僅在必要時才進行水平滾動

Question

我有一個水平滾動頁面，箭頭指示滾動。我正在使用下面的代碼，它工作正常。

HTML：

<div id="container"> 
<div id="parent"> 
    <div class="contentBlock">1</div> 
    <div class="contentBlock">2</div> 
    <div class="contentBlock">3</div> 
    <div class="contentBlock">4</div> 
    <div class="contentBlock">5</div> 
</div> 
<span id="panLeft" class="panner" data-scroll-modifier='-1'>Left</span> 
<span id="panRight" class="panner" data-scroll-modifier='1'>Right</span> 

CSS：

#container{ 
    width:600px; 
    overflow-x:hidden; 
} 

#parent { 
    width:6000px; 
} 
.contentBlock { 
    font-size:10em; 
    text-align:center; 
    line-height:400px; 
    height:400px; 
    width:500px; 
    margin:10px; 
    border:1px solid black; 
    float:left; 
} 
.panner { 
    border:1px solid black; 
    display:block; 
    position:fixed; 
    width:50px; 
    height:50px; 
    top:45%; 
} 
.active { 
    color:red; 
} 
#panLeft { 
    left:0px; 
} 
#panRight { 
    right:0px; 
} 

的Javascript：

(function() { 

    var scrollHandle = 0, 
     scrollStep = 5, 
     parent = $("#container"); 

    //Start the scrolling process 
    $(".panner").on("mouseenter", function() { 
     var data = $(this).data('scrollModifier'), 
      direction = parseInt(data, 10); 

     $(this).addClass('active'); 

     startScrolling(direction, scrollStep); 
    }); 

    //Kill the scrolling 
    $(".panner").on("mouseleave", function() { 
     stopScrolling(); 
     $(this).removeClass('active'); 
    }); 

    //Actual handling of the scrolling 
    function startScrolling(modifier, step) { 
     if (scrollHandle === 0) { 
      scrollHandle = setInterval(function() { 
       var newOffset = parent.scrollLeft() + (scrollStep * modifier); 

       parent.scrollLeft(newOffset); 
      }, 10); 
     } 
    } 

    function stopScrolling() { 
     clearInterval(scrollHandle); 
     scrollHandle = 0; 
    } 

}()); 

您還可以查看在WordPress的，安裝的代碼就在這裏：http://ustria-steila.ch/test

箭頭和滾動工作得很好 - 但我有不同數量的文本和圖像的不同網站。所以有些頁面需要水平滾動，有些則不需要。如何添加某種if條件來僅在存在水平溢出時才顯示箭頭？

Answer 1

你的JavaScript代碼應該是這樣的：

(function() { 

     var scrollHandle = 0, 
      scrollStep = 5, 
      parent = $("#container"); 
     if(checkOverflow()){ 
      $(".panner").show(); 
     } 
     else 
      $(".panner").hide(); 
     //Start the scrolling process 
     $(".panner").on("mouseenter", function() { 
      var data = $(this).data('scrollModifier'), 
       direction = parseInt(data, 10); 

      $(this).addClass('active'); 

      startScrolling(direction, scrollStep); 
     }); 

     //Kill the scrolling 
     $(".panner").on("mouseleave", function() { 
      stopScrolling(); 
      $(this).removeClass('active'); 
     }); 

     //Actual handling of the scrolling 
     function startScrolling(modifier, step) { 
      if (scrollHandle === 0) { 
       scrollHandle = setInterval(function() { 
        var newOffset = parent.scrollLeft() + (scrollStep * modifier); 

        parent.scrollLeft(newOffset); 
       }, 10); 
      } 
     } 

     function stopScrolling() { 
      clearInterval(scrollHandle); 
      scrollHandle = 0; 
     } 
     function checkOverflow() 
     { 
      var el=document.getElementById('container'); 
      var curOverflow = el.style.overflowX; 
      if (!curOverflow || curOverflow === "visible") 
       el.style.overflowX = "hidden"; 

      var isOverflowing = el.clientWidth < el.scrollWidth; 
      el.style.overflowX = curOverflow; 

      return isOverflowing; 
     } 

    }());