帆布响应滚动

Question

我在我的网站中使用sketch.js插件，但是如果我使用它不会响应且水平滚动，我不需要依赖body { overflow: hidden }，那么解决方案是什么：

在这里我的代码：

// ----------------------------------------
// Particle
// ----------------------------------------
function Particle(x, y, radius) {
    this.init(x, y, radius);
}
Particle.prototype = {
    init: function (x, y, radius) {
        this.alive = true;
        this.radius = radius || 10;
        this.wander = 0.15;
        this.theta = random(TWO_PI);
        this.drag = 0.92;
        this.color = '#fff';
        this.x = x || 0.0;
        this.y = y || 0.0;
        this.vx = 0.0;
        this.vy = 0.0;
    },
    move: function () {
        this.x += this.vx;
        this.y += this.vy;
        this.vx *= this.drag;
        this.vy *= this.drag;
        this.theta += random(-0.5, 0.5) * this.wander;
        this.vx += sin(this.theta) * 0.1;
        this.vy += cos(this.theta) * 0.1;
        this.radius *= 0.96;
        this.alive = this.radius > 0.5;
    },
    draw: function (ctx) {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, TWO_PI);
        ctx.fillStyle = this.color;
        ctx.fill();
    }
};
// ----------------------------------------
// Example
// ----------------------------------------
var MAX_PARTICLES = 280;
var COLOURS = ['#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423'];
var particles = [];
var pool = [];
var demo = Sketch.create({
    container: document.getElementById('particles'),
    retina: 'auto'
});
demo.setup = function () {
    // Set off some initial particles.
    var i, x, y;
    for (i = 0; i < 20; i++) {
        x = (demo.width * 0.5) + random(-100, 100);
        y = (demo.height * 0.5) + random(-100, 100);
        demo.spawn(x, y);
    }
};
demo.spawn = function (x, y) {
    var particle, theta, force;
    if (particles.length >= MAX_PARTICLES)
        pool.push(particles.shift());
    particle = pool.length ? pool.pop() : new Particle();
    particle.init(x, y, random(5, 40));
    particle.wander = random(0.5, 2.0);
    particle.color = random(COLOURS);
    particle.drag = random(0.9, 0.99);
    theta = random(TWO_PI);
    force = random(2, 8);
    particle.vx = sin(theta) * force;
    particle.vy = cos(theta) * force;
    particles.push(particle);
};
demo.update = function () {
    var i, particle;
    for (i = particles.length - 1; i >= 0; i--) {
        particle = particles[i];
        if (particle.alive) particle.move();
        else pool.push(particles.splice(i, 1)[0]);
    }
};
demo.draw = function () {
    demo.globalCompositeOperation = 'lighter';
    for (var i = particles.length - 1; i >= 0; i--) {
        particles[i].draw(demo);
    }
};
demo.mousemove = function () {
    var particle, theta, force, touch, max, i, j, n;
    for (i = 0, n = demo.touches.length; i < n; i++) {
        touch = demo.touches[i], max = random(1, 4);
        for (j = 0; j < max; j++) {
            demo.spawn(touch.x, touch.y);
        }
    }
};

html, body{
    height:100%;
}
ul{
    margin:0;
    padding:0;
}
section {
  padding: 50px 0;
}
#home {
  width: 100%;
  height:100%;
  position: relative;
  padding: 50px;
  background-image: url(../images/cover1.jpg);
  background-position:center center;
  background-size: cover;
}
#home #particles {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left:0;
    background-color:#333333;
}
#home .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.60);
}
#home .text-content {
    width: 65%;
    margin: auto;
    padding: 10px;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color:#ffffff;
    text-align: center;
}

<script src="http://soulwire.github.io/sketch.js/js/sketch.js"></script>
<section id="home" >
        <div class="overlay">
            <div id="particles">
            </div>
            <div class="text-content">
                content
            </div>
        </div>
    </section>

---

请在全屏中运行代码段

Answer 1

尝试一下，我在画布上用负余量修复了它

#particles canvas{
  margin:-15px -15px 0 0;
}

https://jsfiddle.net/mkdizajn/plohsbnu/