把jquery方法改为js写，滚动条居然滚出去了，当时就懵逼了.....

Question

把jquery方法改为js写，滚动条居然滚出去了，当时就懵逼了.....

发布于
2016-06-22

更新于
2016-06-23

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<style>
*{padding:0; margin:0; list-style:none;}
.wrap{ width:800px; margin:20px auto; padding:10px; background:#e1e1e1; height:280px; position:relative; }
.content{ padding-right:20px; font-size:14px; height:280px; overflow:hidden; position:relative;}
.context{ position:absolute; left:0; top:0;}
.moveBar{width:10px;height:300px;background:#555;position:absolute;top:0;right:0px;} 
.bar{background:#ccc5ae; width:10px;height:48px; cursor:move; position:relative; border-radius:5px;}
</style>
<body>
<div class="wrap" id="wrap">
     <div class="content">
        <div class="context" id="context">
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        <p>谈起机器学习，真是令人心生向往同时又让人头痛不已。心生向往是因为机器学习在很多方面都已经展现出其魅力</p>
        </div>
      </div>
      <div class="moveBar" id="moveBar"><div class="bar" id="bar"></div></div>
</div>
<script type="text/javascript">

var wrap=document.getElementById("wrap").offsetTop;
var moveBar=document.getElementById("moveBar").offsetTop;
var m=wrap+moveBar;
console.log(m);
var h=document.getElementById("context").offsetHeight;

document.getElementById("moveBar").onmousedown=function(){
   var isMove = true; 
   document.getElementById("bar").onmousemove=function(event){
     if (isMove){ 
        if(event.pageY>252+m){
           event.pageY=252+m;
        }
        if(event.pageY<m){
           event.pageY=m;
        }
        document.getElementById("bar").style.top=event.pageY-m+'px';
        document.getElementById("context").style.top=(event.pageY-m)*-((h-280)/252)+'px';
        } 
        console.log(event.pageY);  
   }
   document.getElementById("bar").onmouseup=function(){
        isMove = false; 
   }
}
</script>
</body>
</html>

哪位大虾帮忙改改

javascript

阅读 2.1k

1 个回答

不错不错不错不错不错不错不错不错不错不错不错不错不错不错

撰写回答