Ankündigung

Einklappen
Keine Ankündigung bisher.

Userscript: Elemente scrollbar anpinnen.

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Userscript: Elemente scrollbar anpinnen.

    Hallo!

    HTML-Code:
    .widgets {
       position:fixed;
       width:300px;
       overflow:scroll
     }
    Ich möchte auf einer Internetseite (ein "Coyo - soziales Intranet") per Userscript (Stylus) Elemente anpinnen. Die Elemente sollen aber scrollbar sein. Das anpinnen ist kein Problem. Nur das Scrollen bekomme ich nicht hin. "overflow:scroll" funktioniert nicht. Die Elemente gehen über den unteren Seitenrand hinaus Wie macht man das? Geht das mit CSS? Oder nur mit Userscript (Tampermonkey)? Und gibt es überhaupt eine Lösung? Danke!

    Gruß, René

  • #2
    Meinst du sowas?

    https://jsfiddle.net/s7z14mjp/2/

    Kommentar


    • #3
      Bei "position:fixed top left" zeigt Stylus einen Fehler an ("Expected end of value but found top". Aber die Richtung stimmt.

      Kommentar


      • #4
        Ich kenn Stylus nicht, du kannst ebenfalls "position:absolute;" nutzen oder mal die CSS Eigenschaften ansehen: https://www.w3schools.com/css/css_positioning.asp

        Kommentar


        • #5
          Alles schon probiert. Funktioniert nichts.

          Kommentar


          • #6
            Zitat von mumpel Beitrag anzeigen
            Bei "position:fixed top left" zeigt Stylus einen Fehler an ("Expected end of value but found top". Aber die Richtung stimmt.
            Dann mach's doch einfach so:
            Code:
            .fixed {
            position: fixed;
            top: 0;
            left:0;
            }
            Siehe dazu auch die CSS Positionierung von Elementen: https://wiki.selfhtml.org/wiki/CSS/E...erung/position

            Wenn ich dich richtig verstanden habe, dann willst du oben ein Element haben, das nicht mit scrollt, sondern immer da oben bleibt? Und alles andere soll normal scrollen?

            Kommentar


            • #7
              Alles was ihr vorgeschlagen habr habe ich schon erfolglos probiert.

              Zitat von derwunner Beitrag anzeigen
              Wenn ich dich richtig verstanden habe, dann willst du oben ein Element haben, das nicht mit scrollt, sondern immer da oben bleibt? Und alles andere soll normal scrollen?
              Nein. Ich möchte ein Element festpinnen welches separat scrollbar sein soll. Das Teil "Meine Gruppen" im Bild soll fixiert werden, aber trotzdem separat scrollbar sein. Der Rest der Seite scrollt normal wie vorgegeben.


              Als Alternative habe ich auch versucht eine "Scroll-To-Top"-Funktion per Userscript (Tampermonkey) einzuschleusen, damit ich nicht zuviel scrollen muss. Funktioniert leider nicht. Coyo ist leider nicht so leicht zu durchschauen. Und die arbeiten auch nicht mit eindeutigen Element-IDs. sondern nur mit Klassen. Das macht eine Anpassung sehr schwer. Da kommt auch AngularJS zum Einsatz, leider kein jQuery.

              Kommentar


              • #8
                Ich versteh nur Bahnhof. Kannst du bitte eine ausführliche Skizze posten, am besten nicht im Briefmarkenformat?

                Kommentar


                • #9
                  Zitat von hellbringer Beitrag anzeigen
                  IKannst du bitte eine ausführliche Skizze posten, am besten nicht im Briefmarkenformat?
                  Ich kann nicht zeichnen. Das mit dem Bild liegt am Forenparser. Sollte eigentlich eine vergrößerbare Vorschau sein. http://fs1.directupload.net/images/180313/q9m9ek8m.png
                  Leider ist die Farbgebung der Seite schlecht. Auf die Originalseite verlinken kann ich nicht, da Intranetseite mit Zugangsschutz.

                  Kommentar


                  • #10
                    Hier mal ein kleine "Skizze" 2+3+4 gehören im Original zusammen und scrollen auch gemeinsam. 3 soll fixiert werden, soll aber separat scrollbar sein da es über den Seitenrand hinausgeht. 1 ist die Navigationsleiste (diese ist schon fixiert). 4 ist die "Timeline" die natürlich länger ist als 2+3, weshalb man sehr weit zurückscrollen muss um zu 2+3 zu gelangen. Deshalb möchte ich 3 festpinnen, aber separat scrollbar. 2 kann man vernachlässigen.
                    http://fs1.directupload.net/images/180313/vupow6mq.png

                    Kommentar


                    • #11
                      Habe mal deine Skizze nach gebaut ist das so richtig ,oder beziehen sich deine Zahlen auf den inneren grauen kästen?
                      http://sebastian1012.bplaced.net/For...-mit-fest.html
                      Ich mach keine Rechtschreibfehler - ich schreib Freestyle!
                      Erreichbar in mein Javascript-Forum und in Facebook-Chat

                      Kommentar


                      • #12
                        Von der Optik her passt es. Aber vom Aufbau (HTML-Code) nicht. Ich befürchte dass es bei Coyo nicht funktioniert. Da werden wir wohl warten müssen bis der Hersteller unsere Wünsche einbaut, wenn er es macht.


                        Hier mal mein nicht funktionierendes Userscript (aus dem Internet gefischt) zum Einschleusen einer "Scroll-on-top"-Funktion in den Body-Bereich. Vielleicht habt ihr ja noch eine Möglichkeit mit der es funktionieren könnte.

                        HTML-Code:
                        // ==UserScript==
                        // @name         ScrollToTop-Funktion
                        // @namespace    http:/seite.de/
                        // @version      0.1
                        // @description  Zum Seitenanfang scrollen
                        // @author       You
                        // @match        https://intranetseite.com/*
                        // @grant        none
                        // ==/UserScript==
                        
                        
                        (function(){
                            'use strict';
                        
                          window.addEventListener('load', () => {
                            addButton('Nach oben', selectReadFn);
                            });
                        
                            function addButton(text, onclick, cssObj) {
                                cssObj = cssObj || {position: 'absolute', bottom: '120px', left:'4px', 'z-index': 3};
                                let button = document.createElement('button'), btnStyle = button.style;
                                document.getElementById("body").appendChild(button);
                                button.innerHTML = text;
                                button.onclick = onclick;
                                Object.keys(cssObj).forEach(key => btnStyle[key] = cssObj[key]);
                                return button;
                            }
                        
                        }());

                        Kommentar


                        • #13
                          Ich habe jetzt mal ein paar Firefox-Add-Ons probiert die eine "Scroll to top"-Funktion bereitstellen sollen. Aber selbst die funktionieren auf unserer Intranet-Seite nicht. Ich werde mal beim Hersteller von Coyo nachfragen.

                          Kommentar


                          • #14
                            Zitat von mumpel Beitrag anzeigen
                            Und die arbeiten auch nicht mit eindeutigen Element-IDs. sondern nur mit Klassen.
                            Das sehe ich nicht als Problem, man muss es nur richtig angehen.

                            Zitat von mumpel Beitrag anzeigen
                            Das macht eine Anpassung sehr schwer. Da kommt auch AngularJS zum Einsatz, leider kein jQuery.
                            Bei dem Kommentar stellt es mir sämtliche Nackenhaare auf, schade, dass es keinen Kotz-Smiley gibt... ^^ Wer jQuery über Angular bevorzugt, der hat entweder keine Ahnung oder hat den Sinn von Angular noch nicht verstanden. Alles ist besser als jQuery! Ja vorallem performanter, man braucht viel weniger Code für das gleiche Ergebnis usw.

                            Dein oben gezeigtes Skript ist ECMAScript 2016. Das ist das neue JavaScript und jetzt nicht wirklich was besonderes...

                            Kommentar


                            • #15
                              Angular ist gefühlt schwerer, zumindest für mich. Da muss man viel lernen.

                              Kommentar

                              Lädt...
                              X