JSFiddle - React, Tailwind, and code Playground

by andig2

HTML

<script src="https://raw.githubusercontent.com/tkahn/Smooth-Div-Scroll/master/js/jquery.smoothdivscroll-1.3-min.js"></script>
<script src="https://raw.githubusercontent.com/tkahn/Smooth-Div-Scroll/master/js/jquery.mousewheel.min.js"></script>
<script src="https://raw.githubusercontent.com/tkahn/Smooth-Div-Scroll/master/js/jquery.kinetic.min.js"></script>
<div class="widget">	<span>Living room</span>

    	<h1>Temp</h1>

</div>
<div id="makeMeScrollable">
    <div>19,0</div>
    <!--<div class="minor">19,5</div>-->
    <div>20,0</div>
    <!--<div class="minor">20,5</div>-->
    <div>21,0</div>
    <!--<div class="minor">21,5</div>-->
    <div>22,0</div>
    <!--<div class="minor">22,5</div>-->
    <div>23,0</div>
    <!--<div class="minor">23,5</div>-->
    <div>24,0</div>
</div>

CSS

#makeMeScrollable, .widget, .scrollableArea div:first-of-type, .scrollableArea div:last-of-type {
    width: 250px;
    text-align: center;
}
#makeMeScrollable {
    position: relative;
    overflow: hidden;
}
.widget {
    padding: 0.5em 0;
    font: 2em bold;
    background-color: #f8f8f8;
    /* .arrow_box */
    position: relative;
}
.widget:after {
    /* .arrow_box:after */
    z-index: 2;
    top: 100%;
    left: 50%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(248, 248, 248, 0);
    border-top-color: #f8f8f8;
    border-width: 20px;
    margin-left: -20px;
}
.scrollableArea div {
    position: relative;
    display: inline-block;
    float: left;
    /* remove inline white-space */
    height: 100%;
    width: 160px;
    padding: 0.32em 0 0.32em 0;
    font: 4em bold;
    background-color: #eee;
}
.scrollableArea div.minor {
    width: 60px;
    padding: 1.9em 0 0 0;
    font: 2em bold;
    display: none;
}

JavaScript

// None of the options are set
$("div#makeMeScrollable").smoothDivScroll({
    autoScrollingMode: "onStart",
    touchScrolling: true,
    visibleHotSpotBackgrounds: false,
    hotSpotsVisibleTime: 300,
    mousewheelScrolling: "horizontal",
    hotSpotScrolling: false,
});

var colors = ['E5000D', 'E40200', 'E31000', 'E31F00', 'E22E00', 'E13D00', 'E14B00', 'E05A00', 'E06800', 'DF7700', 'DE8500', 'DE9300', 'DDA100', 'DDAF00', 'DCBD00', 'DBCB00', 'DBD900', 'CEDA00', 'BFDA00', 'B0D900', 'A1D800', '93D800', '84D700', '76D700', '67D600', '59D500', '4BD500', '3CD400', '2ED400', '20D300', '12D200', '05D200', '00D108', '00D116', '00D023', '00CF31', '00CF3E', '00CE4C', '00CE59', '00CD66', '00CC73', '00CC80', '00CB8D', '00CB9A', '00CAA7', '00C9B4', '00C9C0', '00C3C8', '00B6C8', '00A8C7', '009AC6', '008DC6', '0080C5', '0072C5', '0065C4', '0058C3', '004BC3', '003EC2', '0031C2', '0024C1', '0017C0', '000BC0', '0100BF', '0E00BF'];

$('.scrollableArea').children().each(function (i, el) {
    $(el).data('value', parseFloat($(el).text().replace(',', '.')));
});

var scrollFunc = function (e) {
    var xpos = $('.scrollWrapper').scrollLeft();
    var width = $('.scrollableArea').outerWidth(true) - $('.scrollableArea').children().eq(0).outerWidth(true);
    var perc = xpos / width;

    var lo = $('.scrollableArea').children().first().data('value');
    var hi = $('.scrollableArea').children().last().data('value');

    // value
    $('.widget h1').text((perc * (hi - lo) + lo).toFixed(1));

    // color
    var opacity = '0.4';
    var rgb = colors[Math.round((1 - perc) * (colors.length - 1))];
    var matches = rgb.match(/^([\da-f]{2})([\da-f]{2})([\da-f]{2})/i);
    var rgba = 'rgba(' + matches.slice(1).map(function (m) {
        return parseInt(m, 16);
    }).concat(opacity) + ')';

    $('.scrollableArea div').css({
        'background-color': rgba
    });
};

// init
scrollFunc();

$('.scrollWrapper').on("scroll", scrollFunc);