PHP + HTML + CSS + Javascript
Scroll with drag using finger touch / mouse vertically / horizontally rubik like feel.
JQuery Based
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="icon.png">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rubik UI Test</title>
<script src="js/jquery.js"></script>
<style>
body{
margin:0;
padding:0;
}
.container{
max-width: 1080px;
margin:0 auto;
padding:20px 50px;
}
.products_wrapper{
overflow: auto;
height: 50vh;
width: 50vh;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background-color: darkgoldenrod;
}
.line_product {
overflow-x: scroll;
overflow-y: scroll;
white-space: nowrap;
}
.card {
margin:0.5vh;
display: inline-block;
border-radius: 1rem;
box-shadow: 0 2px 5px rgba(0,0,0,.2);
width: 15vw;
line-height: 9vh;
text-align: center;
}
</style>
<script>
(function($) {
$.dragScroll = function(options) {
var settings = $.extend({
scrollVertical: true,
scrollHorizontal: true,
cursor: null
}, options);
var clicked = false,
clickY, clickX;
var getCursor = function() {
if (settings.cursor) return settings.cursor;
if (settings.scrollVertical && settings.scrollHorizontal) return 'move';
if (settings.scrollVertical) return 'row-resize';
if (settings.scrollHorizontal) return 'col-resize';
}
var updateScrollPos = function(e, el) {
$('html').css('cursor', getCursor());
var $el = $(el);
settings.scrollVertical && $el.scrollTop($el.scrollTop() + (clickY - e.pageY));
settings.scrollHorizontal && $el.scrollLeft($el.scrollLeft() + (clickX - e.pageX));
}
$(document).on({
'mousemove': function(e) {
clicked && updateScrollPos(e, this);
},
'mousedown': function(e) {
clicked = true;
clickY = e.pageY;
clickX = e.pageX;
},
'mouseup': function() {
clicked = false;
$('html').css('cursor', 'auto');
}
});
}
}(jQuery))
$.dragScroll();
</script>
</head>
<body>
<div class="container">
<?php
echo '<div class="products_wrapper">'."\n";
for($i=1;$i<=3;$i++){
echo '<div class="horizontal_wrapper">'."\n";
for($j=1;$j<=4;$j++){
echo '<div class="line_product">'."\n";
for($k=1;$k<=10;$k++){
echo '<div class="card">'."\n";
echo '<p class="card-text">'."Page $i Line $j Item $k".'</p>'."\n";
echo '</div>'."\n";
}
echo '</div>'."\n";
}
echo '</div>'."\n";
}
echo '</div>'."\n";
?>
</div>
</body>
</html>
based on :
https://stackoverflow.com/questions/19743228/scroll-the-page-on-drag-with-jquery
Tidak ada komentar:
Posting Komentar