My goal is to create a set of three div elements that can be scrolled by dragging the mouse. However, I am encountering an issue where the window is scrolling instead of the divs themselves. When I attempted to change the window.scrollTo function to $('.widgets).scrollTo, the debugger returned an error with little information provided. Ideally, I would like these grey div elements to be scrollable without displaying a scroll bar, allowing users to drag them vertically.
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="index.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body class="overflowyhide">
<div id="header" class="overflowyhide">
</div>
<div id="body" class="overflowyhide">
<div class="appcontainer">
<div class="appcardser white">
<p>App Card Ser</p>
<div class="widgets" id="wone">WOne</div>
<div class="widgets" id="wtwo">WTwo</div>
<div class="widgets" id="wthree">WThree</div>
</div>
<div class="caui white">
Caui
<div id="widgetOne">
WidgetOne
<div class="closeCAUI">Close</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
#header{
outline: 1px solid red;
background: black;
}
#body{
outline: 1px solid blue;
background: black;
}
body{
}
.white{
color: white;
}
.overflowyhide{
overflow-y: hidden;
}
#widgetOne{
background: red;
height: 50px;
}
.widgets{
height: 400px;
color: black;
-webkit-user-select: none;
-moz-user-select: moz-none;
-ms-user-select: none;
user-select: none;
}
#wone{
background: #dedede;
}
#wtwo{
background: #9E9E9E;
}
#wthree{
background: #828282;
}
.appcontainer{
margin-right: 60px;
margin-left: 60px;
position: relative;
}
.appcardser{
position: relative;
display: inline-block;
vertical-align: top;
white-space: normal;
word-wrap: break-word;
overflow:hidden;
transition:all 0.4s ease-in;
z-index: 10;
}
.appcardser:hover{
background: rgba(0,0,0,1);
position: relative;
display: inline-block;
vertical-align: top;
transition:all 0.4s ease-in;
white-space: normal;
word-wrap: break-word;
overflow-y:scroll;
overflow-x:hidden;
z-index: 10;
}
.caui{
position: absolute;
height:350px;
top:90%;
width: 100%;
left: 0%;
z-index: 100;
background-color: rgba(8,8,8,0.95);
transition:all 0.2s ease-in-out;
}
.cauitrans{
position: absolute;
height:350px;
top:0%;
width: 100%;
left: 0%;
z-index: 100;
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-o-filter: blur(20px);
-ms-filter: blur(20px);
filter: blur(20px);
transition:all 0.2s ease-in-out;
}
.cauireal{
position: absolute;
/* height:350px;
*/ top:0%;
width: 100%;
left: 0%;
z-index: 100;
transition:all 0.2s ease-in-out;
}
.cauismall{
position: absolute;
height:15px;
width: 15px;
top:92%;
left:2%;
z-index: 100;
border-radius: 50%;
border:1px solid rgba(255,0,0,1);
background-color: rgba(255,0,0,1);
transition:all 0.2s ease-in-out;
}
.cauibig{
position: absolute;
top:10%;
width: 100%;
left: 0%;
z-index: 100;
background-color: rgba(8,8,8,0.9);
transition:all 0.2s ease-in-out;
}
.contdisapper{
opacity: 1;
visibility: visible;
transition:all 0.2s ease-in-out;
}
.contdisapperani{
opacity: 0;
visibility: hidden;
transition:all 0.2s ease-in-out;
}
JS:
$(document).ready(function(){
$('#header').height($(window).height()*0.1);
$('#body').height($(window).height()*0.9);
$('.appcontainer').width($(window).width()*0.55);
$('.appcardser').width($(window).width()*0.55);
$('.cauibig').height($(window).height()*0.8);
$('.caui').height($(window).height()*0.8);
$('.appcardser, .appcontainer').height($(window).height()*0.9);
// $('.clicktransform2').click(function() {
// $('.caui').toggleClass('cauibig');
// });
$('.caui').click(function(){
var heightOne = $('#widgetOne').height();
var appContainerHeight = $('.appcontainer').height();
if (heightOne >= appContainerHeight*0.1 && heightOne <= appContainerHeight*0.3){
console.log("one");
console.log(appContainerHeight*0.1);
console.log(appContainerHeight*0.3);
$('.caui').css({top: "80%"});
}
else if (heightOne > appContainerHeight*0.3 && heightOne <= appContainerHeight*0.5){
console.log("two");
console.log(appContainerHeight*0.3);
console.log(appContainerHeight*0.5);
$('.caui').css({top: "60%"});
}
else if (heightOne > appContainerHeight*0.5 && heightOne <= appContainerHeight*0.7){
console.log("three");
console.log(appContainerHeight*0.5);
console.log(appContainerHeight*0.7);
$('.caui').css({top: "40%"});
}
else if (heightOne > appContainerHeight*0.7 && heightOne <= appContainerHeight*0.9){
console.log("four");
console.log(appContainerHeight*0.7);
console.log(appContainerHeight*0.9);
$('.caui').css({top: "20%"});
}
else {
$('.caui').css({top: "10%"});
}
});
$(document).on('click', '.closeCAUI', function(){
$('.caui').css({top: "90%"});
});
// $('.closeCAUI').hover(function(){
// $('.caui').css({top: "90%"});
// })
var xpos = 0;
var ypos = 0;
var drag = false;
window.addEventListener('mousemove', function(e){
if (drag == true){
//console.log("drag is true");
newx = document.body.scrollLeft + (xpos - e.pageX);
newy = document.body.scrollTop + (ypos - e.pageY);
window.scrollTo(newx, newy);
console.log(newx);
}
});
window.addEventListener('mousedown', function(e){
drag = true;
xpos = e.pageX;
ypos = e.pageY;
});
window.addEventListener('mouseup', function(e){
drag = false;
});
});
Jsfiddle : http://jsfiddle.net/whw4h421/