Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Skripten / Logik
    4. JavaScript
    5. (gelöst) HTML DOM scrollTop Property

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    (gelöst) HTML DOM scrollTop Property

    This topic has been deleted. Only users with topic management privileges can see it.
    • ice987
      ice987 last edited by ice987

      Hallo,

      ich generiere meine Einkaufsliste über ein JS-Script. Da beim hinzufügen und entfernen von Elementen jeweils die Tabelle neu generiert werden muss, "vergisst" VIS die Position und beginnt immer wieder mit dem ersten Eintrag. Dem möchte ich nun gerne Abhilfe verschaffen, indem ich beim scrollen die Position merke, diese anschliessend in einen DP schreibe und bei der Neugeneration der Liste wieder zur bereits gespeicherten Scrollposition gehe.

      dies sollte eigentlich gem. https://www.w3schools.com/jsref/prop_element_scrolltop.asp auch funktionieren:

      Widget-Export:

      [{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"<!DOCTYPE html>\n<html>\n<head>\n<style>\n\n#myDIV {\n  height: 597px;\n  width: 375px;\n  overflow-y: auto;\n  overflow-x:hidden;\n}\n\n</style>\n</head>\n<body>\n\n<button onclick=\"myFunction1()\">Scroll contents of div</button><br><br>\n<script>\nfunction myFunction1() {\n  var elmnt = document.getElementById(\"myDIV\");\n  elmnt.scrollTop = 200;\n}\n</script>\n\n\n<div id=\"myDIV\" onscroll=\"myFunction()\">\n    <table>\n    <tr>\n        <td>\n            blabla\n            <br><br><br><br>\n        </td>\n    </tr>\n    <tr>\n        <td>\n            blabla\n            <br><br><br><br>\n        </td>\n    </tr>\n    <tr>\n        <td>\n            blabla\n            <br><br><br><br>\n        </td>\n    </tr>\n    <tr>\n        <td>\n            blabla\n            <br><br><br><br>\n        </td>\n    </tr>\n    <tr>\n        <td>\n            blabla\n            <br><br><br><br>\n        </td>\n    </tr>\n    <tr>\n        <td>\n            blabla\n            <br><br><br><br>\n        </td>\n    </tr>\n    <tr>\n        <td>\n            blabla\n            <br><br><br><br>\n        </td>\n    </tr>\n    <tr>\n        <td>\n            blabla\n            <br><br><br><br>\n        </td>\n    </tr>\n    <tr>\n        <td width=\"278px\" onclick=\"servConn.setState('0_userdata.0.liste.scrollPos',  20)\"> test<br><p id=\"demo\"></p><br><br><br></td>\n    </tr>\n    <tr>\n        <td>\n            blabla\n            <br><br><br><br>\n        </td>\n    </tr>\n    <tr>\n        <td>\n            blabla\n            <br><br><br><br>\n        </td>\n    </tr>\n    <tr>\n        <td>\n            blabla\n            <br><br><br><br>\n        </td>\n    </tr>\n    <tr>\n        <td>\n            blabla\n            <br><br><br><br>\n        </td>\n    </tr>\n    <tr>\n        <td>\n            blabla\n            <br><br><br><br>\n        </td>\n    </tr>\n    <tr>\n        <td>\n            blabla\n            <br><br><br><br>\n        </td>\n    </tr>\n</table>\n</div>\n\n\n\n<script>\nfunction myFunction() {\n  var elmnt = document.getElementById(\"myDIV\");\n  var y = elmnt.scrollTop;\n  document.getElementById (\"demo\").innerHTML = \"Vertically: \" + y + \"px\";\n}\n</script>\n\n\n\n</body>\n</html>"},"style":{"left":"0px","top":"99px","width":"375px","height":"597px","overflow-x":"hidden","overflow-y":"hidden"},"widgetSet":"basic"}]
      

      meine Frage nun: wie kriege ich nun den Pixelwert in den DP? aktuell habe ich da "20" drin. Hat evtl. jemand einen guten Ansatz?

      -> der Ansatz von https://forum.iobroker.net/topic/16879/vorlage-tracklisthtml-scrolling-für-spotify -> Skript für Spotify_Playlist -> scrollIntoView habe ich bereits implementiert. Funktioniert auch, leider ist die Ausrichtung etwas ungenau, da die genaue Position des Elementes auf dem Bildschrim so nicht bekannt ist.

      OliverIO 1 Reply Last reply Reply Quote 0
      • OliverIO
        OliverIO @ice987 last edited by

        @ice987
        Schau mal hier.
        https://www.javascripttutorial.net/dom/css/get-and-set-scroll-position-of-an-element/

        ice987 1 Reply Last reply Reply Quote 0
        • ice987
          ice987 @OliverIO last edited by

          @OliverIO
          Vielen Dank für deine Unterstützung... offenbar reichen da aber meine JS-Kenntnisse nicht.

          OliverIO 1 Reply Last reply Reply Quote 0
          • OliverIO
            OliverIO @ice987 last edited by

            @ice987
            hast du schon aufgegeben?
            benenne doch mal dein konkretes aktuelles Problem an dem es hakt, dann kann ich dir helfen,
            oder hast du es gar nicht probiert?

            ice987 1 Reply Last reply Reply Quote 0
            • ice987
              ice987 @OliverIO last edited by

              @OliverIO
              mein Problem ist, dass ich nicht weiss, wie ich den vom JS-generierten (Scroll)Wert als HTML verwendbaren Wert erhalte, welchen in dann in den DP speichern kann. Den Ansatz, welchen ich versuche ist wie folgt:

              https://stackoverflow.com/questions/14845710/javascript-variable-access-in-html

              OliverIO 1 Reply Last reply Reply Quote 0
              • OliverIO
                OliverIO @ice987 last edited by

                @ice987

                ich habe dir dein widget mal etwas um überflüssige anteile bereinigt
                und die scrollposition so gesetzt, das man das auch immer sieht.
                hast du den das genau verstanden welcher Anteil da was genau macht?
                Wenn nicht, dann sollten wir erst einmal damit anfangen.

                was ich so sehe ist, das die funktion zum speichern der position als datenpunkt erst aufgerufen wird, wenn du auf ein bestimmtes element clickst.
                du solltest die funktion zur anzeige der scrollposition so anpassen, das darin der wert in den datenpunkt geschrieben wird. da diese funktion aber uU zig mal pro sekunde vom browser aufgerufen wird, solltest du da eine zeitverzögerte Prüfung einbauen, so das der wert erst geschrieben wird, wenn 500ms oder 1000ms keine änderung der scrollposition erfolgt.
                ich habe dir mal in die anzeige noch einen counter eingebaut, so das du siehst wie oft die funktion so aufgerufen wird.

                [{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"<style>\n\n#myDIV {\n height: 597px;\n width: 375px;\n overflow-y: auto;\n overflow-x:hidden;\n}\n\n</style>\n<button onclick=\"myFunction1()\">Scroll contents of div</button><br><br>\n<script>\nfunction myFunction1() {\n var elmnt = document.getElementById(\"myDIV\");\n elmnt.scrollTop = 200;\n}\n</script>\n\n<p id=\"demo\"></p>\n<div id=\"myDIV\" onscroll=\"myFunction()\">\n <table>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td width=\"278px\" onclick=\"servConn.setState('0_userdata.0.liste.scrollPos', 20)\"> test<br><br><br><br></td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n</table>\n</div>\n\n\n\n<script>\nvar counter=0;\nfunction myFunction() {\n    counter+=1;\n var elmnt = document.getElementById(\"myDIV\");\n var y = elmnt.scrollTop;\n document.getElementById (\"demo\").innerHTML = \"Vertically: \" + y + \"px; counter= \"+counter;\n}\n</script>\n\n"},"style":{"left":"80px","top":"61px","width":"375px","height":"597px","overflow-x":"hidden","overflow-y":"hidden"},"widgetSet":"basic"}]
                

                ice987 1 Reply Last reply Reply Quote 0
                • ice987
                  ice987 @OliverIO last edited by

                  @OliverIO

                  vielen Dank für deine Unterstützung. Also, ich habe mir deine Aktualisierung angeschaut und lerne folgendes:

                  • im basic HMTL-Widget brauche ich in kein vollständiges "HTML-Gerüst", d.h. ich kann "<!DOCTYPE html><html><head></head></html>" weglassen
                  • den Code habe ich (für mich) mal auskommentiert

                  [{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"<!-- myDIV definiert einen Bereich mit angegebener Höhe/Breite; overflow-y auto zeigt den Scrollbalken an, wenn Inhalt grösser als Bereich, overflow-y hidden verbietet die Anzeige eines Scrollbalken -->\n<style>\n#myDIV {\n height: 597px;\n width: 375px;\n overflow-y: auto;\n overflow-x: hidden;\n}\n</style>\n\n<!-- definition einer Variablen mit dem Namen counter, welche den (initial) Wert 0 zugewiesen wird\n    myFunction(): Funktion wird definiert\n    counter+=1: (oder: counter = counter + 1) In der Variable \"counter\" werden die Anzahl der Aufrufe von myFunction() gezählt: dem bereits bestehenden Wert wird Zähler 1 addiert\n    var elmnt: document.getElementById(\"myDIV\"): der Variable mit Namen \"elmt\" wird die Referenz zu \"myDIV\" zugewiesen\n    var y = elmnt.scrollTop: der Variable mit dem Namen \"y\" zählt die Pixel vom oberen Elementrand\n    document.getElementById (\"demo\").innerHTML: dem oben definierten Abschnitt <p></p> mit id=demo wird gefüllt mit dem Text \"Vertically: \" dem Pixelwert aus Variable \"y\" dem Text \"px; counter= \" und dem Wert der Aufrufe von Variable \"counter\"\n -->\n <script>\n    var counter = 0;\n    \n    function myFunction() {\n        counter+=1;\n        var elmnt = document.getElementById(\"myDIV\");\n        var y = elmnt.scrollTop;\n        document.getElementById (\"demo\").innerHTML = \"Vertically: \" + y + \"px; counter= \"+counter;\n    }\n</script>\n\n<!-- button onclick: löst die Funktion myFunction1() beim Draufklicken aus -->\n<button onclick=\"myFunction1()\">Scroll contents of div</button><br><br>\n\n<!-- myFunction1(): Funktion wird definiert\n    var elmnt: document.getElementById(\"myDIV\"): der Variable mit Namen \"elmt\" wird die Referenz zu \"myDIV\" zugewiesen\n    elmnt.scrollTop = 200: der vorhin definierten Variable elmnt, welche auf das div mit id=\"myDIV\" verweist wird der Befehl erteilt, vom oberen Elementrand 200px nach unten zu scrollen\n-->\n<script>\nfunction myFunction1() {\n var elmnt = document.getElementById(\"myDIV\");\n elmnt.scrollTop = 200;\n}\n</script>\n\n<script>\nfunction myFunction2() {\n    var elmnt1 = document.getElementById(\"myDIV\");\n    var y1 = elmnt1.scrollTop;\n    return y1; \n}\n</script>\n\n<!-- definition eines Paragraphen mit dem Namen \"demo\" -->\n<p id=\"demo\"></p>\n\n<!-- defintion des Abschnittes mit dem Namen \"myDiv\", beim jeweiligen scrollen dieses Bereiches wird immer die Funktion \"myFunction()\" ausgelöst -->\n<div id=\"myDIV\" onscroll=\"myFunction()\">\n <table>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td width=\"278px\" onclick=\"servConn.setState('0_userdata.0.liste.scrollPos', myFunction2())\"> test<br><br><br><br></td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n</table>\n</div>"},"style":{"left":"0px","top":"44px","width":"375px","height":"597px","overflow-x":"hidden","overflow-y":"hidden"},"widgetSet":"basic"}]
                  

                  nun habe ich eine neue "function myFunction2()" definiert (auch neue Variablen). Mit dieser hole ich den scrollTop-Wert und übergebe diese dem onclick-Statement und schreibe diese in den DP.

                  OliverIO 1 Reply Last reply Reply Quote 0
                  • OliverIO
                    OliverIO @ice987 last edited by

                    @ice987 sagte in HTML DOM scrollTop Property:

                    im basic HMTL-Widget brauche ich in kein vollständiges "HTML-Gerüst", d.h. ich kann "<!DOCTYPE html><html><head></head></html>" weglassen

                    ja genau, du hast ja bereits ein html/head/body-konstrukt, das dir bereits vis bereitstellt. vis fügt dir das widget in die vorhandene seite an entsprechender stelle ein.

                    ich habe nochmal ein paar änderungen vorgenommen, da das td-test-element in einer tabelle so keine klicks empfangen kann. daher ein separater button, der eine funktion aufruft, wo zum einen der dp gesetzt wird und zum anderen dir direkt anzeigt ob es funktioniert.
                    bei mir hat es soweit funktioniert.

                    [{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"<!-- myDIV definiert einen Bereich mit angegebener Höhe/Breite; overflow-y auto zeigt den Scrollbalken an, wenn Inhalt grösser als Bereich, overflow-y hidden verbietet die Anzeige eines Scrollbalken -->\n<style>\n#myDIV {\n height: 597px;\n width: 375px;\n overflow-y: auto;\n overflow-x: hidden;\n}\n</style>\n\n<!-- definition einer Variablen mit dem Namen counter, welche den (initial) Wert 0 zugewiesen wird\n myFunction(): Funktion wird definiert\n counter+=1: (oder: counter = counter + 1) In der Variable \"counter\" werden die Anzahl der Aufrufe von myFunction() gezählt: dem bereits bestehenden Wert wird Zähler 1 addiert\n var elmnt: document.getElementById(\"myDIV\"): der Variable mit Namen \"elmt\" wird die Referenz zu \"myDIV\" zugewiesen\n var y = elmnt.scrollTop: der Variable mit dem Namen \"y\" zählt die Pixel vom oberen Elementrand\n document.getElementById (\"demo\").innerHTML: dem oben definierten Abschnitt <p></p> mit id=demo wird gefüllt mit dem Text \"Vertically: \" dem Pixelwert aus Variable \"y\" dem Text \"px; counter= \" und dem Wert der Aufrufe von Variable \"counter\"\n -->\n <script>\n var counter = 0;\n \n function myFunction() {\n counter+=1;\n var elmnt = document.getElementById(\"myDIV\");\n var y = elmnt.scrollTop;\n document.getElementById (\"demo\").innerHTML = \"Vertically: \" + y + \"px; counter= \"+counter;\n }\n</script>\n\n\n\n<!-- myFunction1(): Funktion wird definiert\n var elmnt: document.getElementById(\"myDIV\"): der Variable mit Namen \"elmt\" wird die Referenz zu \"myDIV\" zugewiesen\n elmnt.scrollTop = 200: der vorhin definierten Variable elmnt, welche auf das div mit id=\"myDIV\" verweist wird der Befehl erteilt, vom oberen Elementrand 200px nach unten zu scrollen\n-->\n<script>\nfunction myFunction1() {\n var elmnt = document.getElementById(\"myDIV\");\n elmnt.scrollTop = 200;\n}\n</script>\n\n<script>\nfunction myFunction2() {\n var elmnt1 = document.getElementById(\"myDIV\");\n var y1 = elmnt1.scrollTop;\n return y1; \n}\nfunction myFunction3() {\nservConn.setState('0_userdata.0.liste.scrollPos', myFunction2())\n document.getElementById (\"demo\").innerHTML = \"Click\";\n}\n</script>\n\n<!-- definition eines Paragraphen mit dem Namen \"demo\" -->\n<p id=\"demo\">.</p>\n<button onclick=\"myFunction3()\">scrollpos</button><br>\n<!-- button onclick: löst die Funktion myFunction1() beim Draufklicken aus -->\n<button onclick=\"myFunction1()\">Scroll contents of div</button><br>\n<!-- defintion des Abschnittes mit dem Namen \"myDiv\", beim jeweiligen scrollen dieses Bereiches wird immer die Funktion \"myFunction()\" ausgelöst -->\n<div id=\"myDIV\" onscroll=\"myFunction()\">\n <table>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n <tr>\n <td>\n blabla\n <br><br><br><br>\n </td>\n </tr>\n</table>\n</div>"},"style":{"left":"0px","top":"44px","width":"375px","height":"597px","overflow-x":"hidden","overflow-y":"hidden"},"widgetSet":"basic"}]
                    

                    1 Reply Last reply Reply Quote 0
                    • First post
                      Last post

                    Support us

                    ioBroker
                    Community Adapters
                    Donate

                    640
                    Online

                    31.7k
                    Users

                    79.8k
                    Topics

                    1.3m
                    Posts

                    javascript
                    2
                    8
                    413
                    Loading More Posts
                    • Oldest to Newest
                    • Newest to Oldest
                    • Most Votes
                    Reply
                    • Reply as topic
                    Log in to reply
                    Community
                    Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                    The ioBroker Community 2014-2023
                    logo