Scrolling Problem

with pure javascript solution

HTML

<h1 style="text-align:center"> 
Picking with Embedded 3JS, variable width 
</h1>

<hr/>
<div id="container">
    <canvas id="cnvs"></canvas>
</div>
<hr style="clear:both">
<p>add a line</p>
<p>add a line</p>
<p>add a line</p>
<p>add a line</p>
<p>add a line</p>
<p>add a line</p>
<p>add a line</p>
<p>add a line</p>
<p>add a line</p>
<p>add a line</p>
<p>add a line</p>
<p>add a line</p>
<p>add a line</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js">
    
</script>

CSS

#container {
    width:60vw;
    height: 60vw;
    float:left;
    background-color:pink;
    margin: 10px;
}

JavaScript

var scene, renderer, camera;
var controls;
var plane, cyl;
var mouse = new THREE.Vector2();
var theCanvasFrame;

init();
animate();

function init() {
    var theCanvas = document.getElementById("cnvs");
    theCanvasFrame = document.getElementById("container");
////////////////////////////////////////////////////////////////////////////
    theCanvasFrame.addEventListener('mousewheel', function (event) {
        if (event.preventDefault) event.preventDefault();
        return false;
    }, false);
////////////////////////////////////////////////////////////////////////////
    
    renderer = new THREE.WebGLRenderer({
        canvas: theCanvas,
        antialias: true
    });
    var ww = theCanvasFrame.clientWidth;
    var hh = theCanvasFrame.clientHeight;
    renderer.setSize(ww, hh);
    renderer.setClearColor(0x555555);

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(45, ww / hh, 1, 10000);
    camera.position.x = 0;
    camera.position.y = 80;
    camera.position.z = 200;
    camera.lookAt(new THREE.Vector3(0, 0, 0));

    var cyl_geom = new THREE.CylinderGeometry(10, 10, 6, 32);
    var cyl_mat = new THREE.MeshLambertMaterial({
        color: 0xff2211
    });
    cyl = new THREE.Mesh(cyl_geom, cyl_mat);
    cyl.position.set(-20, 0, 20);
    scene.add(cyl);

    // add control here (after the camera is defined)
    controls = new THREE.OrbitControls(camera, renderer.domElement);

    var gridXZ = new THREE.GridHelper(100, 20);
    gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
    gridXZ.position.set(0, 0, 0);
    scene.add(gridXZ);

    // build an invisible plane, overlapping the grid
    plane = new THREE.Mesh(
    new THREE.PlaneBufferGeometry(200, 200, 8, 8),
    new THREE.MeshBasicMaterial({
        color: 0xff0000,
        opacity: 0.25,
        transparent: true
    }));
    plane.rotation.x = -Math.PI / 2;
    plane.visible = false; // invisible, for picking only
    scene.add(plane);

    var...