JSFiddle - React, Tailwind, and code Playground

by mrcarllister

HTML

<html>
<head>
    <title>iPhone Test</title>


<script type="text/javascript">
  $(function() {
    
    // Set header viewport to follow viewport scroll on x axis
    $('#viewport, #header_viewport').
        scrollsync({targetSelector: '#viewport', axis : 'x'});
    
    // Set drag scroll on first descendant of class dragger on both selected elements
    $('#viewport, #inner').
        dragscrollable({dragSelector: '.dragger:first', acceptPropagatedEvent: true});
     
  });
    
</script>


</head>

<body>
    <div style="width:30em; height:950px; background:url(iphone5.jpg);position:relative;">
            <div id="inner" style="position:relative; top:13em; z-index: 10; width:20em; height:29em; margin:5em; overflow:auto; background:lightblue;overflow:hidden;cursor: pointer; cursor: hand;">
                <div class="dragger">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In nisi arcu, viverra vitae, cursus non, pretium eget, leo. Praesent euismod, nisl at sollicitudin pharetra, nisi sapien mattis massa, non volutpat lacus magna aliquam sem. Cras cursus velit in diam. Duis porttitor hendrerit nisl. Proin iaculis vehicula augue. Curabitur placerat nulla sit amet lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eget orci eget mauris molestie condimentum. Curabitur suscipit. Integer metus leo, lacinia sollicitudin, euismod ac, tempus at, nibh. Phasellus suscipit, massa quis euismod eleifend, pede sapien euismod justo, a convallis lacus ante in magna. Curabitur tincidunt orci non leo. Sed augue elit, cursus sed, fringilla ac, laoreet vel, tellus. Maecenas tristique, pede sed consequat convallis, lorem sem congue purus, at gravida risus tortor id ligula. Nam sollicitudin.
    
                    Vestibulum a purus vitae velit laoreet eleifend. Nullam condimentum scelerisque lacus. <a class="#" href="google.co.uk">Class</a> aptent taciti sociosqu ad litora torquent per conubia...

JavaScript

/*
 * jQuery scrollsync Plugin
 * version: 1.0 (30 -Jun-2009)
 * Copyright (c) 2009 Miquel Herrera
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 */
;(function($){ // secure $ jQuery alias

/**
 * Synchronizes scroll of one element (first matching targetSelector filter)
 * with all the rest meaning that the rest of elements scroll will follow the 
 * matched one.
 * 
 * options is composed of the following properties:
 *    ------------------------------------------------------------------------
 *    targetSelector    | A jQuery selector applied to filter. The first element of
 *                    | the resulting set will be the target all the rest scrolls
 *                    | will be synchronised against. Defaults to ':first' which 
 *                    | selects the first element in the set.
 *    ------------------------------------------------------------------------
 *    axis            | sets the scroll axis which will be synchronised, can be
 *                    | x, y or xy. Defaults to xy which will synchronise both.
 *    ------------------------------------------------------------------------
 */
$.fn.scrollsync = function( options ){
    var settings = $.extend(
            {   
                targetSelector:':first',
                axis: 'xy'
            },options || {});
    
    
    function scrollHandler(event) {
        if (event.data.xaxis){
            event.data.followers.scrollLeft(event.data.target.scrollLeft());
        }
        if (event.data.yaxis){
            event.data.followers.scrollTop(event.data.target.scrollTop());
        }
    }
    
    // Find target to follow and separate from followers
    settings.target = this.filter(settings.targetSelector).filter(':first');
    settings.followers=this.not(settings.target); // the rest of elements

    // Parse axis
    settings.xaxis= (settings.axis=='xy' ||...