JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="pos">move the table</div>
<div id="error"></div>
<div id="wrapper">
<table id="scroller">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
CSS
#wrapper {
position: relative;
width: 1200px;
height: 800px;
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;
}
#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);
}
#scroller tr{
position:relative;
}
table {
position: relative;
background-color: #aaa;
border-collapse: collapse;
}
/*thead*/
thead {
position: relative;
display: block; /*seperates the header from the body allowing it to be positioned*/
width: 700px;
}
thead th {
background-color: #99a;
min-width: 120px;
height: 32px;
border: 1px solid #222;
z-index: 9;
}
thead th:nth-child(1) {/*first cell in the header*/
position: relative;
display: block; /*seperates the first cell in the header from the header*/
background-color: #88b;
z-index: 10;
}
/*tbody*/
tbody {
position: relative;
display: block; /*seperates the tbody from the header*/
}
tbody td {
background-color: #bbc;
min-width: 120px;
border: 1px solid #222;
}
tbody tr td:nth-child(1) { /*the first cell in each tr*/
position: relative;
display: block; /*seperates the first column from the tbody*/
height: 40px;
background-color: #99a;
}
JavaScript
// sorry, my smartphone couldn't load external js for the fiddle
// the code is at the bottom, just press CTRL+END
try{
/*! iScroll v5.1.2 ~ (c) 2008-2014 Matteo Spinelli ~ http://cubiq.org/license */
(function (window, document, Math) {
var rAF = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) { window.setTimeout(callback, 1000 / 60); };
var utils = (function () {
var me = {};
var _elementStyle = document.createElement('div').style;
var _vendor = (function () {
var vendors = ['t', 'webkitT', 'MozT', 'msT', 'OT'],
transform,
i = 0,
l = vendors.length;
for ( ; i < l; i++ ) {
transform = vendors[i] + 'ransform';
if ( transform in _elementStyle ) return vendors[i].substr(0, vendors[i].length-1);
}
return false;
})();
function _prefixStyle (style) {
if ( _vendor === false ) return false;
if ( _vendor === '' ) return style;
return _vendor + style.charAt(0).toUpperCase() + style.substr(1);
}
me.getTime = Date.now || function getTime () { return new Date().getTime(); };
me.extend = function (target, obj) {
for ( var i in obj ) {
target[i] = obj[i];
}
};
me.addEvent = function (el, type, fn, capture) {
el.addEventListener(type, fn, !!capture);
};
me.removeEvent = function (el, type, fn, capture) {
el.removeEventListener(type, fn, !!capture);
};
me.prefixPointerEvent = function (pointerEvent) {
return window.MSPointerEvent ?
'MSPointer' + pointerEvent.charAt(9).toUpperCase() + pointerEvent.substr(10):
pointerEvent;
};
me.momentum = function (current, start, time, lowerMargin, wrapperSize, deceleration) {
var distance = current - start,
speed = Math.abs(distance) / time,
...