전체 화면 캔버스 무시

웹 페이지 전체에 캔버스 전체 화면이 있습니다. 크기가 processingjs에서 처리됩니다.전체 화면 캔버스 무시

 <div id="canvasDiv"> 
      <canvas id="processingCanvas" data-processing-sources="resources/processing/canvas01.pde"> </canvas> 
     </div>

캔버스 뒤에는 많은 텍스트가 있습니다. 문제는 캔버스가 맨 위에 있기 때문에 더 이상 iPad에서 스크롤 할 수 없다는 것입니다. 캔버스를 무시하는 방법이 있나요?

#canvasDiv { 
    position: absolute; 
    left: 0; 
    z-index: 999; 
} 



#processingCanvas { 
    position: fixed; 
    top: 0; 
    left: 0; 
}

출처

2013-03-10 clankill3r

여기 요소는 기본 요소를 떨어지게하는 방법은 다음과 같습니다 : 이것은 현재 CSS입니다

브라우저는 크롬, 파이어 폭스, 사파리, 블랙 베리 또는 안드로이드 있지만 IE 또는 경우 Opera에서 포인터 이벤트를 사용하여 캔버스에 클릭/터치 이벤트를 처리하지 말고 클릭/터치가 기본 요소에 의해 처리되도록 할 수 있습니다. 그래서, CSS에서 는 :

#topCanvas{ pointer-events: none; }

그러나 IE와 오페라에서

, 당신은 힘들 수 있습니다

숨기기 상단 캔버스, 하단 요소
트리거 이벤트,

쇼 톱 캔버스 .

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

<style> 
body{ background-color: ivory; } 
#wrapper{ width:200; height:200;} 
#bottom{ position:absolute; top:0; left:0; width:200; height:200; background-color:red; } 
#top{ position:absolute; top:0; left:0; width:200; height:200; background-color:blue; } 
</style> 

<script> 
$(function(){ 

    $('#top').click(function (e) { 
     $('#top').hide(); 
     $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click"); 
     $('#top').show(); 
    }); 

    $("#bottom").click(function(){ alert("bottom was clicked."); }); 

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

</head> 

<body> 
    <div id="wrapper"> 
     <canvas id="bottom"></canvas> 
     <canvas id="top"></canvas> 
    </div> 
</body> 
</html>

이 코드는 기본 요소에 이벤트를 트리거하는 방법을 보여줍니다

출처

2013-03-10 15:46:43 markE

전체 화면 캔버스 무시

답변

관련 문제