Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Skripten / Logik
  4. JavaScript
  5. (gelöst) HTML DOM scrollTop Property

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.5k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.1k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    2.7k

(gelöst) HTML DOM scrollTop Property

Geplant Angeheftet Gesperrt Verschoben JavaScript
javascript
8 Beiträge 2 Kommentatoren 476 Aufrufe 2 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • ice987I Offline
    ice987I Offline
    ice987
    schrieb am zuletzt editiert von ice987
    #1

    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.

    husqvarna-automower, meteoblue, wiserbyfeller, spritmonitor

    OliverIOO 1 Antwort Letzte Antwort
    0
    • ice987I 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.

      OliverIOO Offline
      OliverIOO Offline
      OliverIO
      schrieb am zuletzt editiert von
      #2

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

      Meine Adapter und Widgets
      TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
      Links im Profil

      ice987I 1 Antwort Letzte Antwort
      0
      • OliverIOO OliverIO

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

        ice987I Offline
        ice987I Offline
        ice987
        schrieb am zuletzt editiert von
        #3

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

        husqvarna-automower, meteoblue, wiserbyfeller, spritmonitor

        OliverIOO 1 Antwort Letzte Antwort
        0
        • ice987I ice987

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

          OliverIOO Offline
          OliverIOO Offline
          OliverIO
          schrieb am zuletzt editiert von
          #4

          @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?

          Meine Adapter und Widgets
          TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
          Links im Profil

          ice987I 1 Antwort Letzte Antwort
          0
          • OliverIOO OliverIO

            @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?

            ice987I Offline
            ice987I Offline
            ice987
            schrieb am zuletzt editiert von
            #5

            @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

            husqvarna-automower, meteoblue, wiserbyfeller, spritmonitor

            OliverIOO 1 Antwort Letzte Antwort
            0
            • ice987I ice987

              @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

              OliverIOO Offline
              OliverIOO Offline
              OliverIO
              schrieb am zuletzt editiert von
              #6

              @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"}]
              

              Meine Adapter und Widgets
              TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
              Links im Profil

              ice987I 1 Antwort Letzte Antwort
              0
              • OliverIOO OliverIO

                @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"}]
                

                ice987I Offline
                ice987I Offline
                ice987
                schrieb am zuletzt editiert von
                #7

                @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.

                husqvarna-automower, meteoblue, wiserbyfeller, spritmonitor

                OliverIOO 1 Antwort Letzte Antwort
                0
                • ice987I ice987

                  @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.

                  OliverIOO Offline
                  OliverIOO Offline
                  OliverIO
                  schrieb am zuletzt editiert von
                  #8

                  @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"}]
                  

                  Meine Adapter und Widgets
                  TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                  Links im Profil

                  1 Antwort Letzte Antwort
                  0
                  Antworten
                  • In einem neuen Thema antworten
                  Anmelden zum Antworten
                  • Älteste zuerst
                  • Neuste zuerst
                  • Meiste Stimmen


                  Support us

                  ioBroker
                  Community Adapters
                  Donate

                  812

                  Online

                  32.4k

                  Benutzer

                  81.5k

                  Themen

                  1.3m

                  Beiträge
                  Community
                  Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                  ioBroker Community 2014-2025
                  logo
                  • Anmelden

                  • Du hast noch kein Konto? Registrieren

                  • Anmelden oder registrieren, um zu suchen
                  • Erster Beitrag
                    Letzter Beitrag
                  0
                  • Home
                  • Aktuell
                  • Tags
                  • Ungelesen 0
                  • Kategorien
                  • Unreplied
                  • Beliebt
                  • GitHub
                  • Docu
                  • Hilfe