Instead fo scrolling emit an event after the image is drawn

This lets the user decide what to do (like scrolling)

packages/qr-code-scanner/README.md

@@ -32,6 +32,7 @@ after loaded. This attribute is also used to stop the QR code reader or if you d
 ## Events
 
 - `'code-detected'`: Outgoing Event which is fired if a QR code is detected. The data of the detected QR code is in `event.detail`.
+- `'scan-started`: Fired after the first image is drawn. Can be used to scrolling or other layout dependent tasks.
 
 ## Local development
 

packages/qr-code-scanner/src/qr-code-scanner.js

@@ -198,8 +198,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
         this.stopScan = false;
 
         let canvasElement = this._("#canvas");
-        let qrContainer = this._("#qr");
-        let scroll = false;
+        let firstDrawDone = false;
 
         this._askPermission = true;
         this._loadingMessage = i18n.t('no-camera-access');
@@ -232,6 +231,10 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
                 canvasElement.width = video.videoWidth;
                 let canvas = canvasElement.getContext("2d");
                 canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
+                if (!firstDrawDone) {
+                    that.dispatchEvent(new CustomEvent("scan-started", {bubbles: true, composed: true}));
+                    firstDrawDone = true;
+                }
 
                 let maskWidth = canvasElement.width;
                 let maskHeight = canvasElement.height;
@@ -303,10 +306,6 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
                     lastSentData = null;
                 }
             }
-            if (video.readyState === video.HAVE_ENOUGH_DATA && !scroll) {
-                qrContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                scroll = true;
-            }
             console.assert(that._requestID === null);
             that._requestID = requestAnimationFrame(tick);
         }
@@ -446,7 +445,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
 
         return html`
             <div class="columns">
-                <div class="column" id="qr">
+                <div class="column">
                     
                     <div class="${classMap({hidden: !hasDevices})}">