Pfeile für horizontales Scrollen

[irenehofer]

Ich benutze den folgenden Code, um Pfeile für horizontales Scrollen anzuzeigen (das funktioniert einwandfrei).

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

}());

Nun ist es so, dass ich unterschiedliche Seiten habe - manche brauchen horizontales Scrolling, manche nicht (weil kein Conent im overflow ist). Ist es möglich, z.B. eine "if"-Schlaufe einzubinden, welche die Pfeile nur wenn nötig anzeigen lässt?

 

[mikdoe]

Ganz allgemein kann man feststellen, ob Content sich außerhalb des Viewport befindet und dann handeln. Man nimmt die Offsethöhe des Content zuzüglich dessen .style.top Position und schaut, ob das größer Viewport Ende ist.

 

[irenehofer]

Danke, @mikdoe. Wie würde das nun konkret für meinen Code aussehen? Mit HTML und CSS kenne ich mich aus, aber Javascript ist für mich leider noch etwas Neuland...

 

[mikdoe]

Benutz doch einfach die jQuery Codes. Ich nehme doch an, dass das $ bei dir jQuery ist, oder?
Das wären dann .css() und .height(). Oder gleich ein geeignetes jQuery Plugin, was dir das alles abnimmt. Einfach mal googeln, wichtig ist, „jQuery“ als ersten Suchbegriff und dahinter deine Stichworte einzugeben. Konkreter geht es im Moment nicht, bin auf dem Sprung.

 

[irenehofer]

Also mein Code ist auf dem hier aufgebaut: Horizontal Content Slider - JSFiddle
Ich versuche mal, ein passendes jQuery Plugin zu finden.