畫布滾動條不起作用

我在div標籤內創建了畫布，並將背景圖像添加到畫布上。這裏是代碼：畫布滾動條不起作用

<div id="container" style="width: 740px; height: 420px"> 
    <canvas id="canvas_draw"></canvas>       
</div> 

#container 
    { 
     position: relative; 
    } 
    #canvas_draw 
    { 
     border: 1px dashed #CCCCCC; 
     margin: 5px; 
     border-style: dotted; 
     border-width: 1px; 
     background-color: #FFFFFF; 
     overflow:scroll !important; 
     background-image:url('Images/sample.jpg'); 
     background-repeat: no-repeat; 
     background-size: 900px 600px; 
     vertical-align: top; 
    }

輸出是，滾動條顯示在畫布上，但無法滾動它。我在Chrome上進行了測試。嘗試將滾動功能應用於div，它的工作正常，但是，unable to draw on scroll area。因此，我將overflow: scroll功能僅應用於畫布。如何解決此滾動條問題。

在此先感謝...

來源

2013-03-13 Lokesh

添加滾動條，而以帆布

帆布並不像其他HTML元素。 Html滾動條無法有效滾動大於畫布css大小的畫布內容。

一個回退是使用jquery-ui繪製滾動條。

這裏是如何垂直滾動條添加到允許滾動向上/向下在一個較大的圖像的畫布：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-03-13 12:38:10 markE

這似乎是很多額外的代碼做一些看似簡單使用CSS和正常的HTML。但是，如上所述，您必須通過代碼爲每個加載的圖像調整畫布大小。我們正在通過jQuery將畫布設置爲圖像大小。

當您設置包裝div的寬度時，您需要考慮滾動條寬度。您還應該在基於瀏覽器的代碼中設置此寬度。唯一的問題是不同瀏覽器渲染引擎之間的滾動條寬度不同。

這裏談論的是一個鏈接：http://www.sitepoint.com/rwd-scrollbars-is-chrome-better/，它簡化了僅使用HTML和CSS滾動

這裏的代碼。

<!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: 318px; /* adjusted hard-coded scrollbar width; you should set this with js */ 
    height: 300px; 
    border: 2px solid black; 
    margin:30px 0 2; 
    overflow-y: scroll; /* scrolling vertical only */ 
    overflow-x: hidden; /* hiding horizontal scrollbar */ 
    background-color: green; 
} 

#mycanvas { 
    left:0px; 
    top:0px; 
} 
</style> 

<script> 
$(function(){ 
    var canvas = document.getElementById("mycanvas"); 
    var ctx = canvas.getContext("2d"); 

    var wrapper; 
    var canvasHeight; 

    var img = new Image(); 
    img.onload = function() { 
     canvas.width = this.width; 
     canvas.height = this.height; 
     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> 

<div class="wrapper" id="canvaswrapper"> 
    <canvas id="mycanvas" width="300px" height="300px" /> 
</div> 

</body> 
</html>

來源

2013-10-22 20:37:22 Bob

畫布滾動條不起作用

回答

相關問題