JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.mba-europe.de/scripts/jquery.tools.min.124.js"></script>
<div id="koerper" style="margin:auto; position:relative; width:965px; height:466px; z-index:1; background-image:  url(./../Bilder/bglehr.png)"> 
  <div id="Contenido" class="fcontent"  style="position:absolute; width:703px; height:335px; z-index:1; right: 25px; top: 20px"> 

      <p align="left" class="ftitcontent" style="margin-bottom:15px; margin-left:10px;">Aktuelle Veröffentlichungen:</p>
        <!-- "previous page" action -->                                           
        <a class="prev browse left" style="float:left;"></a>                                          
                
                <!-- root element for scrollable -->

                <div class="bscrollable" style="float:left;">            
                                                    
                   <!-- root element for the items -->
                   <div class="bitems">                
                        
                        <div class="item">
                            <div style="width:150px; height:230px; background-color:none;" id="image">
                                <a rel="dogs" href="/Bilder/publikationen/zentes_strategic-scaled.png" style=""> <img style="border-style:none; widtdh:150px; height:210px; overflow:hidden;"  src="http://www.mba-europe.de/Bilder/publikationen/zentes_strategic-scaled.png" /></a>
                            </div>
                            <div style="width:150px; background-color:none;" id="image">
                                <span style="font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">Zentes, J.; Morschett, D.; Schramm-Klein, H., 2011: Strategic Retail Management, Wiesbaden.</span>

                            </div>                            
                        </div>                        
                        
                        <div class="item">
                            <div...

CSS

/* this makes it possible to add next button beside scrollable */
div.scrollable vertical {
        
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage, a.noScroll{
    margin-left:20px;
    width:250px;
    height:10px;
    background:url(http://www.mba-europe.de/Bilder/course_arrow_up.png);
    cursor:pointer;
    font-size:1px;
    filter: alpha(opacity=60);
    -moz-opacity:0.6;
    opacity:.60;
    
    
    margin-left:10px;
    width:10px;
    height:290px;
    background:url(http://www.mba-europe.de/Bilder/course_arrow_left_290.png);
    cursor:pointer;
    font-size:1px;
    filter: alpha(opacity=60);
    -moz-opacity:0.6;
    opacity:.60;
}

/* prev, next, prevPage and nextPage buttons */
a.prev.submenu, a.next.submenu, a.prevPage.submenu, a.nextPage.submenu, a.noScroll.submenu{
    height:5px;
}

/*for menus with no scolling option due to limited number of items*/
a.noScroll{
    background-image:url(http://www.mba-europe.de/Bilder/course_arrow_no_scoll.png);
    float:left;
}


/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
    filter: alpha(opacity=100);
    -moz-opacity:1.0;
    opacity:1.0;        
}

/* disabled navigational button */
a.disabled {
    /*visibility:hidden !important;*/
    background-image:url(http://www.mba-europe.de/Bilder/course_arrow_no_scroll_large.png) !important;
    //background-repeat: repeat-x !important;
}    

/* costumizations for prev */
a.prev, a.prevPage {
    float:left;
        
}

/* next button uses another background image */
a.next, a.nextPage {
    background-image:url(http://www.mba-europe.de/Bilder/course_arrow_right_290.png);
    float:left;
}



/*********** navigator *********** right now not used/


/* position and dimensions of the navigator */
div.navi {
    margin-left:328px;
    width:200px;
    height:20px;
}


/* items inside navigator */
div.navi a {
    width:8px;
    height:8px;
    float:left;
    margin:3px;
   ...

JavaScript

var $scrollables = $('.bscrollable').scrollable({
    size: 44,
    mousewheel: true,
    vertical: true,
    horizontal: false
}).data('scrollable');
$scrollables.onBeforeSeek(function(e, i) {
    var threshold = $scrollables.getSize() - 4;
    if(i > threshold) {
        e.preventDefault();
    }
});