如何使仅Div滚动而不是窗口滚动？

Question

I am trying to make a set of 3 div elements scrollable by dragging the mouse. 我试图通过拖动鼠标使一组3个div元素可滚动。 Currently, the window is scrolling instead of the divs. 当前，窗口正在滚动而不是div。 On changing the window.scrollTo function to $('.widgets).scrollTo the debugger returns an error without much information. 在将window.scrollTo函数更改为$（'。widgets）.scrollTo时，调试器将返回一个错误而没有太多信息的错误。 What i would like is the div elements in grey to be scrollable without the scroll bar but by dragging the mouse vertically. 我想要的是灰色的div元素，无需滚动条即可滚动，但可以通过垂直拖动鼠标来滚动。

HTML: 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: 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: 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/ Jsfiddle： http : //jsfiddle.net/whw4h421/

Answer 1

To scroll div you shuold use: 要滚动div，请使用以下命令：

$('selector').scrollTop(ypos)

and 和

$('selector').scrollLeft(xpos)

jQuery API Documentation .scrollTop() jQuery API文档.scrollTop（）

Answer 2

You don't need JQuery/Javascript for that. 您不需要为此的JQuery / Javascript。

You can achieve what you want just using CSS. 您可以仅使用CSS即可实现所需的功能。

You need to apply overflow and position properly to the parent and child div's. 您需要对父级和子级div适当地应用overflow和position 。

This demo should show your solution. 该演示应显示您的解决方案。

如何使仅Div滚动而不是窗口滚动？

问题描述

2 个解决方案

解决方案1
1 2015-01-21 10:58:02

解决方案2
1 2015-01-21 11:11:31

如何使仅Div滚动而不是窗口滚动？

问题描述

2 个解决方案

解决方案1 1 2015-01-21 10:58:02

解决方案2 1 2015-01-21 11:11:31

解决方案1
1 2015-01-21 10:58:02

解决方案2
1 2015-01-21 11:11:31