JSFiddle - React, Tailwind, and code Playground

by QMaster

HTML

<div class="pane">
  <div id="leftb">left</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  <div id="rightb">right</div>
</div>


<dive id="sl">?</dive>
<!--<dive id="sr">?</dive>-->

CSS

body, html {margin:0px; display:block; overflow-x:hidden;}
body {background:#999999;}

#leftb {
  position: fixed;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 10px;
  background-color: red;
}

#rightb {
  position: fixed;
  right: 0px;
  top: 0px;
  height: 100%;
  width: 10px;
  background-color: red;
}

.pane {    
    position: relative;
    background-color: yellow;
    margin-top:30px;
    height:200px; 
    width:500px; 
    overflow-x: visible;
    overflow-y: hidden;
    white-space:nowrap;
}

.pane .item {
    width:100px; 
    height:200px; 
    margin-left:10px;
    background:white;
    display:inline-block;
    *display:inline;
    *zoom:1;
    vertical-align:top;
}

JavaScript

$(document).ready(function(){
//alert($('.pane').prop('scrollWidth'));
//alert($('.pane').width());

var realContentSize = parseInt($('.pane').prop('scrollWidth'))-parseInt($('.pane').width());

$('#sl').html($('.pane').scrollLeft());

if ($('.pane').width() < $('.pane').prop('scrollWidth') && parseInt($('.pane').scrollLeft()) < realContentSize) {
    	$('#rightb').show();
}
  else
  {
    $('#rightb').hide();
  }

  if ($('.pane').width() < $('.pane').prop('scrollWidth') && parseInt($('.pane').scrollLeft()) > 0) {
    $('#leftb').show();
  }
  else
  {
    $('#leftb').hide();
  }

/////

function CalcScroll() {
	$('#sl').html($('.pane').scrollLeft());
  var psl = parseInt($('.pane').scrollLeft());
       
  if(psl > 0) {
    $('#leftb').show();
  }
  else
  {
    $('#leftb').hide();
  }          

  if (psl < realContentSize) {
  	$('#rightb').css("position","fixed");
    $('#rightb').css("right","0px");
    $('#rightb').show();
  }
  else
  {
    $('#rightb').hide();
  }
}



    

$(function(){
    //$('.pane').css('width',$(window).width()+'px');
    
    $('#leftb').click(function(){
    		$('#rightb').hide();
        $('#leftb').hide();
        $('.pane').animate({scrollLeft : '-=500'}, 500, function() {
        	CalcScroll();
        });
    });
    
    $('#rightb').click(function(){
    		$('#rightb').hide();
        $('#leftb').hide();
        $('.pane').animate({scrollLeft : '+=500'}, 500, function() {
        	//$('#rightb').animate({scrollLeft : '-=500'});
      		CalcScroll();          
        });
    });
});

});