html5에 동적으로 추가 된 내용이 포함 된 캔버스의 세로 스크롤 막대

높이가 480 인 캔버스가 있습니다. 캔버스에서 이미지를로드하는 데 Easeljs를 사용하고 있습니다. 각 행에는 3 개의 이미지가 있습니다. 캔버스 높이 (480) 이상으로로드 된 이미지는 숨겨집니다. 나는 그 이미지를보기 위해 수직 스크롤바를 추가해야한다. 어떻게 구현할 수 있습니다.html5에 동적으로 추가 된 내용이 포함 된 캔버스의 세로 스크롤 막대

덕분에,
sathya

출처

2013-03-04 sathya

이/아래로 더 큰 이미지 위에까지 스크롤 허용 캔버스에 세로 스크롤 막대를 추가하는 방법입니다 : 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-04 20:08:01 markE

감사 마르크를 숨 깁니다 필요한 수직 스크롤을 보여줍니다, 나는 스크롤 막대를 생성 – sathya

내가 EaselJS에 대한 스크롤 바의 솔루션에 대해 알고하지 않고는 HTML을 통해이 작업을 수행 할 수 없습니다. 그래야만 자신의 스크롤바를 코딩해야 할 것입니다. 문제가 있다면 ActionScript3 용 온라인에서 찾을 수있는 자습서가 있어야합니다. EaselJS 용으로 쉽게 적용 할 수 있습니다.

또 다른 옵션은 캔버스 자체의 높이를 확장하고 상위 컨테이너에 스크롤 막대를 추가하는 것이지만 매우 좋은 해결책이 될지 모르겠습니다. 여기

출처

2013-03-04 15:33:24 olsn

는 사업부와 캔버스 포장, 다음 DIV의 높이를 설정하고, 마지막으로 div에 overflow-y:auto 및 overflow-x: hidden 속성을 적용하십시오. 당신이 제안처럼

overflow-y:auto

는 overflow-x: hidden가 수평 스크롤

http://jsfiddle.net/V92Gn/3509/

<div style="height:200px;width:480px; overflow-y:auto;overflow-x: hidden;"> 
     <canvas id="canvas" style="background:navy" width="480" height="820"></canvas> 
    </div>

출처

2015-09-11 00:52:25

html5에 동적으로 추가 된 내용이 포함 된 캔버스의 세로 스크롤 막대

답변

관련 문제