儘管內容不適合頁面，畫布不顯示滾動條

我在頁面中顯示畫布，畫布中出現的內容的分辨率很高，它並不都適合頁面，但滾動條不顯示無法向上/向下滾動（現在寬度沒有問題）。我試圖改變顯示「阻止」，但沒有幫助。儘管內容不適合頁面，畫布不顯示滾動條

2013-02-25 user220755

我不認爲畫布有那樣的功能，相信你就必須設置寬度和高度，使得內容符合畫布。由於畫布是一幅畫。您可能必須在畫布上實現自己的滾動。 – Rchristiani 2013-02-25 20:08:18

@Rrisristiani是對的。我試圖在畫布上實現滾動，這有點痛苦。你必須跟蹤你的視口，並調整通過視口的X和Y位置顯示的whas – Evan 2013-02-25 20:13:40

是否可以在保存畫布的div上設置滾動，以便我們基本上滾動畫布或上面的註釋是否也適用於此？ – user220755 2013-02-25 20:27:06

你總是可以添加一個jqueryUI滾動條並滾動你的高帆布。

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/a9KDB/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 

<style> 
body{ background-color: ivory; } 
div, canvas { 
    position:absolute; 
} 
.wrapper { 
    top:10px; 
    left:10px; 
    width: 300px; 
    height: 300px; 
    border: 2px solid black; 
    margin:30px 0 2; 
    overflow: hidden; 
    background-color:green; 
} 
.vertical-scroll { 
    left:320px; 
    top:10px; 
    border: 1px solid green; 
    width: 20px; 
    height: 300px; 
} 
.vertical-scroll div.bar { 
    left:0px; 
    top:0px; 
    width: 20px; 
    background-color: blue; 
    height: 20px; 
} 
#mycanvas { 
    left:0px; 
    top:0px; 
} 

</style> 

<script> 
    $(function(){ 

     var canvas=document.getElementById("mycanvas"); 
     var ctx=canvas.getContext("2d"); 

     var wrapper; 
     var canvasHeight; 
     var vScrollHeight; 
     var canvasWrapperHeight=300; 

     $(".bar").draggable({ 
      containment: "parent" 
     }); 

     $(".bar").on("drag", function (event, ui) { 
      var ctop=(-ui.position.top * canvasHeight/canvasWrapperHeight); 
      canvas.style.top = ctop + "px" 
     }); 

     var img=new Image(); 
     img.onload=function(){ 
      canvas.width=this.width; 
      canvas.height=this.height; 
      canvasHeight=this.height; 
      vbarHeight=canvasWrapperHeight*canvasWrapperHeight/canvasHeight; 
      document.getElementById("vbar").style.height=vbarHeight+"px"; 
      ctx.drawImage(this,260,0,300,this.height,0,0,300,this.height); 
     } 
     img.src="http://sciencedude.blog.ocregister.com/files/2008/02/zot1-copy.jpg"; 

    }); // end $(function(){}); 
</script> 

</head> 

<body> 
    <div class="wrapper" id="wrap1"> 
     <canvas id="mycanvas" width="300px" height="300px" /> 
    </div> 
    <div class="vertical-scroll" id="vscroll"> 
     <div class="bar" id="vbar"></div> 
    </div> 
</body> 
</html>

來源

2013-02-26 03:10:14 markE

儘管內容不適合頁面，畫布不顯示滾動條

回答

相關問題