如何使Div可滾動而不是窗口？

我想通過拖動鼠標來滾動一組3個div元素。目前，該窗口正在滾動而不是div。將window.scrollTo函數更改爲$（'。widgets）.scrollTo調試器返回一個錯誤，但沒有太多信息。我想要的是灰色的div元素可以滾動而不用滾動條，但是通過垂直拖動鼠標。如何使Div可滾動而不是窗口？

HTML：

<!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/

來源

2015-01-21 Tarang Hirani