web-dev-qa-db-fra.com

Toile de défilement à l'intérieur div

J'ai une toile html5. Je dois montrer la partie fixe de celui-ci dans la div (Div1). Lorsque je glisse à l'intérieur de Div1, je dois faire défiler la toile. Alors que je fais défiler, je vais voir la partie correspondante de la toile. 

enter image description here

J'ai essayé quelque chose comme ça:

<div id="Div1" style=" float: left; width: 50px; overflow:hidden; ">
   <canvas id="myCanvas1" width="200px" style="border: 1px solid #ff0000; position: absolute;">
   </canvas>
</div>

jsFiddled here

javascriptjqueryhtmlcsshtml5
20
benjamin54
  1. "faire défiler" dans la toile, vous devez gérer 2 cas:
    • lie l'événement "mousedown" dans cette toile et lie l'événement "mouseup" dans la fonction de liaison "mousedown".
    • lie l'événement "DOMmouseup" dans cette toile. L'utilisateur peut rouler le bouton dans la souris pour faire défiler.
  2. Montrer une toile comme un parchemin
    1. Redessiner la toile 
    2. Utilisez clip () dans la toile. Re-définir le rectangle de ce clip pour afficher votre toile
  3. Veuillez supprimer "position: absolute" dans votre css de toile. Et réglez la hauteur de votre "div"

J'espère que ça vous aidera

0
LogPi

ça ne marchera pas (faire défiler la toile de l'intérieur de div dans certaines conditions de "conception"), d'abord votre débordement est masqué. Essayez de faire défiler le contenu à l'intérieur du canevas.

OU essayez ceci: http://jsfiddle.net/9g3GG/2/

<div id="Div1" style=" float: left; width: 150px; overflow:scroll; ">
        <canvas id="myCanvas1" width="200" style="border:1px solid #ff0000;">asdf asd as asfqwe asd asdfasdf asd as asfqwe asd asdfasdf asd as asfqwe asd asdf</canvas>
    </div>

11
Milche Patern

Voici une démonstration de l’utilisation d’une grille surdimensionnée et du défilement de la souris en ajustant la marge CSS: https://jsfiddle.net/ax7n8944/

HTML:

<div id="canvasdiv" style="width: 500px; height: 250px; overflow: hidden">
    <canvas id="canvas" width="10000px" height="250px"></canvas>
</div>

JS:

var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var dragging = false;
var lastX;
var marginLeft = 0;

for (var i = 0; i < 1000; i++) {
    context.beginPath();
    context.arc(Math.random() * 10000, Math.random() * 250, 20.0, 0, 2 * Math.PI, false);
    context.stroke();
} 

canvas.addEventListener('mousedown', function(e) {
    var evt = e || event;
    dragging = true;
    lastX = evt.clientX;
    e.preventDefault();
}, false);

window.addEventListener('mousemove', function(e) {
    var evt = e || event;
    if (dragging) {
        var delta = evt.clientX - lastX;
        lastX = evt.clientX;
        marginLeft += delta;
        canvas.style.marginLeft = marginLeft + "px";
    }
    e.preventDefault();
}, false);

window.addEventListener('mouseup', function() {
    dragging = false;
}, false);
3
pancake

Il est préférable de faire défiler le canevas, voir ce plugin Phaser pour le faire https://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/

2
jdnichollsc

Les lignes de la div sont tracées. définir la taille de la ligne à 0:

DIVofCanvas {
    line-height: 0px;
}
0
PeterFochs