JSFiddle - React, Tailwind, and code Playground

by mreis1

HTML

<script src="http://79.96.90.171/kenericracing/wp-content/themes/kenericracing/js/lib.js?ver=3.8.1"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css">
<div class="alert alert-info">
    This page were bootstrapped based on this github report <a href="https://github.com/cubiq/iscroll/issues/682">https://github.com/cubiq/iscroll/issues/682</a>
</div>

<input type="checkbox" name="disablescroll" id="disableScroll"/><label for="disableScroll">disable IScroll</label>
<div id="wrapper">
	<div id="scroller">
		<p><strong>This demo shows the minimum CSS/HTML/JS configuration you need to run the iScroll. Look at the source code for details.</strong></p>

        <p><a href="#" id="testLink">testLink</a>  Lorem ipsum <a href="http://www.google.com" target="_blank">click here</a> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi...

CSS

#wrapper {
    border:1px solid red;
	position: relative;
	width: 300px;
	height: 300px;
	overflow: hidden;

	/* Prevent native touch events on Windows */
	-ms-touch-action: none;

	/* Prevent the callout on tap-hold and text selection */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* Prevent text resize on orientation change, useful for web-apps */
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
}
.fafafa{
    color:#ccc;
    width:400px;
}

.item1{
    color:red;
}
#scroller {
	position: absolute;

	/* Prevent elements to be highlighted on tap */
	-webkit-tap-highlight-color: rgba(0,0,0,0);

	/* Put the scroller into the HW Compositing layer right from the start */
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
#disableScroll:checked ~ #wrapper {
    height: auto;
    overflow: visible;
}
#disableScroll:checked ~ #wrapper > #scroller {
    position: relative;
}

JavaScript

var myScroll = new IScroll('#wrapper', {
    //here all of the options I use in my project:
    mouseWheel: true,
    scrollbars: true,
    momentum: true,
    resizeScrollbars: false,
    scrollY: true,
    scrollX: false,
    interactiveScrollbars: true,
    shrinkScrollbars: 'scale',
    scrollbars: 'custom',
    click: true
});

$('#testLink').editable({type:"text"})

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
$('#disableScroll').change(function () {
    if(this.checked){
        console.log('disable');
        myScroll.disable();
    } else {
        console.log('enable');
        myScroll.enable();
    }
 });