Горизонтальная прокрутка только при необходимости

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

    }());