JSFiddle - React, Tailwind, and code Playground

by forgetcolor

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<div id="overflow"></div>

<p id="btn">click to fix</p>

CSS

#overflow {
    //overflow:auto;
    width:500px;
    height:200px;
    /* comment out the webkit-transform and the problem dissapears 
     * (but I need the transform for acceleration
     */
    -webkit-transform:translateZ(0);
    //-webkit-translateZ(1);
    border:1px solid #000;
}

#btn {
    cursor:pointer;
}

#btn:hover {
    color:red;
}

JavaScript

var scrollbarWidth = 15;
var r = Math.floor((Math.random()*100000)+1);
//adding r to simulate non-cached images
var pagelink = 'http://lorempixel.com/output/city-q-c-1920-1920-4.jpg?'+r;

$('#overflow').html(
    "<img width='485' style='display:none;' id='imgload' src='"+pagelink+"' />"
);


getImgSize(pagelink,function(sz) {
    
var elem    = $('#overflow');
var heights = elem.children().map(function(){ return $(this).height(); }).get();
var sum     = _.reduce(heights, function(memo, num){ return memo + num; }, 0);

if (sum > elem.innerHeight()) elem.css('overflow', 'scroll');
$('#imgload').show();
elem.show();
});

$('#btn').click(function() {
    $('#overflow').animate({height:200},0);
});


  function getImgSize(imgSrc,callback) {
    var newImg = new Image();

    newImg.onload = function() {
      var height = newImg.height;
      var width = newImg.width;
      //alert ('The image size is '+width+'*'+height);
    function s() {}
    sz = new s();
    sz.width = width;
    sz.height = height;
    console.log("infunc w = "+sz.width+", h = "+sz.height);
    callback(sz);
    }

    newImg.src = imgSrc; // this must be done AFTER setting onload


  }