Anzeige

Overflow Scroll -ausblenden oder....

Overflow Scroll -ausblenden oder.... | PSD-Tutorials.de

Erstellt von imac123, 03.02.2015.

  1. imac123

    imac123 Nicht mehr ganz neu hier

    Dabei seit:
    15.07.2013
    Beiträge:
    165
    Overflow Scroll -ausblenden oder....
    Hallo

    Wie kann ich die erstellte Scrolleiste ausblenden oder kleiner machen? Es sollte nicht über den schwarzen Rand hinaus laufen.

    Die Scrollleiste ist notwendig, sobald es viel Text hat, aber es sieht nicht schön aus, wenn es über den schwarzen Rand herausgeht (siehe Foto)

    Ich habe es mit:
    Code (CSS):
    1. overflow: scroll
    erstellt.


    Hier noch Link: http://i57.tinypic.com/2j153x1.png

    Danke
     
    Zuletzt bearbeitet: 03.02.2015
    #1      
  2. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.103
    Geschlecht:
    männlich
    Ort:
    Ö
    Overflow Scroll -ausblenden oder....
    Was ist das für ein schwarzer Rand, kommt der von einem Bild? Wenn ja, dann hast du keine Möglichkeit, die Scrollleiste nicht darüber laufen zu lassen. Nachdem ich keine Ahnung von deinem HTML/CSS habe kann ich dir auch leider keine weiteren Hinweise geben.
     
    #2      
  3. dn3d_fanboy

    dn3d_fanboy Aktives Mitglied

    Dabei seit:
    04.11.2011
    Beiträge:
    791
    Geschlecht:
    männlich
    Ort:
    Eitorf
    Software:
    VS Code, Notepad++, PS CC, Mapster32
    Kameratyp:
    Dat Teil im Häändy
    Overflow Scroll -ausblenden oder....
    Wie Myhar schon schrieb, es wäre echt gut, den Code der Seite zu kennen. Aus deinem Bild werde ich leider auch nicht schlau.
     
    #3      
  4. afr0kalypse

    afr0kalypse Allwissendes Karmameerschweinchen!

    Dabei seit:
    09.11.2005
    Beiträge:
    820
    Geschlecht:
    männlich
    Ort:
    Mi Casa
    Software:
    paint, notepad++
    Kameratyp:
    Canon EOS 40d
    Overflow Scroll -ausblenden oder....
    #4      
  5. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.103
    Geschlecht:
    männlich
    Ort:
    Ö
    Overflow Scroll -ausblenden oder....
    Und damit kann er dann das scrolling auf einer Seite realisieren?
     
    #5      
  6. imac123

    imac123 Nicht mehr ganz neu hier

    Dabei seit:
    15.07.2013
    Beiträge:
    165
    Overflow Scroll -ausblenden oder....
    Hallo es ist kein Bild, sonder ein Radius...

    Es wurde ein Div Container erstellt und alles andere wurde in CSS gemacht.

    CSS
    Code (CSS):
    1. border:12px solid black;
    2. border-bottom-right-radius:45%;
    3. border-bottom-left-radius:45%;
    Das es keine Möglichkeit für ein Bild hat kann ich verstehen,,aber für Radius ? :rolleyes:


    @afr0kalypse da werde ich auch nicht schlauer hmm...wie soll das funktionieren? :(
     
    #6      
  7. tr4ze

    tr4ze Mod | Forum Teammitglied PSD Beta Team

    422
    Dabei seit:
    02.09.2006
    Beiträge:
    2.057
    Geschlecht:
    männlich
    Ort:
    Nordhorn
    Software:
    CS6, Intuos
    Overflow Scroll -ausblenden oder....
    Nur mit CSS wird das nicht gehen.
    Eine Möglichkeit wäre, eine seperate Scrollbar einzufügen die sichtbar wird wenn z.B. dein Div eine bestimmte Höhe erreicht.
    Die Logik dahinter könnte man dann mit jquery erstellen.

    http://plugins.jquery.com/tag/scrollbar/
     
    #7      
  8. imac123

    imac123 Nicht mehr ganz neu hier

    Dabei seit:
    15.07.2013
    Beiträge:
    165
    Overflow Scroll -ausblenden oder....
    Hmm brauche ich doch keinen jQuery ... Die Scrolleiste wird jetzt hinter dem schwarzen Rand weitergeführt ....



    Code (CSS):
    1. #inhalt{
    2.     margin-left: 10px;
    3.     margin-right: 5px;
    4.     margin-bottom: 10px;
    5.     /*border: 1px solid #333;*/
    6.     /*overflow: hidden;*/
    7.     height: 830px;
    8.     width: auto;
    9.     overflow: scroll;
    10.     /*background: gray;*/
    11.     background: transparent;
    12.     z-index: 2;
    13.     border-bottom-right-radius:47%;
    14.     border-bottom-left-radius:40%;
    15.     }

    Unter .container habe ich nur: overflow: hidden hinzugefügt....

    Code (CSS):
    1. .container {
    2.     border:25px solid #000;
    3.     border-bottom-right-radius:50%;
    4.     border-bottom-left-radius:45%;
    5.     z-index:17;
    6.     overflow: hidden;
    7.     }
     
    #8      
  9. imac123

    imac123 Nicht mehr ganz neu hier

    Dabei seit:
    15.07.2013
    Beiträge:
    165
    Overflow Scroll -ausblenden oder....
    Wieder ich. .....

    In Safari und Chrome funktioniert es (Scrolleiste wird versteckt)..siehe Bild Nr.2

    In Firefox und IE funktioniert es leider nicht -_- siehe Bild Nr.1


    Oben Genanntes jQuery funkt. nicht...

    In Firefox/ Internet Explorer => sieht nicht gut aus.....
    [​IMG]



    In Chrome/Safari wird schön hinter der Schwarze Markierung versteckt.

    [​IMG]


    Danke.
     
    #9      
  10. tr4ze

    tr4ze Mod | Forum Teammitglied PSD Beta Team

    422
    Dabei seit:
    02.09.2006
    Beiträge:
    2.057
    Geschlecht:
    männlich
    Ort:
    Nordhorn
    Software:
    CS6, Intuos
    Overflow Scroll -ausblenden oder....
    Also nochmal, nur mit CSS wird das nicht gehen.
    Du brauchst 2 Elemente, eines mit dem du scrollst und eines das du mit dem Scroll-Element synkronisierst(Also dein Text).
    Das funktioniert auf dem Desktop sehr gut mit Jquery. Hier mal ein Fiddle ->
    http://jsfiddle.net/sgcer/
    Viele moderne OnePager nutzen diese Technik wenn es um Paralax Effekte und ähnliches geht.
    Nur bei mobilen Geräten könntest du da mit der Stromsparfunktion kollidieren.
    Das liegt daran das Javascript Single Threaded ist, und mobile Browser den Parser während des Scollens anhalten(um Rechenleistung/Energie zu sparen).
    Aber auch dafür gibt es verschiedene Workarounds(TranslateX bzw. Canvas).

    Ob sich der Aufwand für so einen fragwürdigen Effekt allerdings lohnt musst du selber entscheiden.
     
    #10      
  11. imac123

    imac123 Nicht mehr ganz neu hier

    Dabei seit:
    15.07.2013
    Beiträge:
    165
    Overflow Scroll -ausblenden oder....
    Weiss zwar nicht wie du es meinst..denn es funktioniert auch so nicht =>

    http://jsfiddle.net/sgcer/1142/


    Die Scrollbalke geht trotzdem über den Border-Radius hinaus..
     
    #11      
  12. tr4ze

    tr4ze Mod | Forum Teammitglied PSD Beta Team

    422
    Dabei seit:
    02.09.2006
    Beiträge:
    2.057
    Geschlecht:
    männlich
    Ort:
    Nordhorn
    Software:
    CS6, Intuos
    Overflow Scroll -ausblenden oder....
    Du brauchst 2, in Worten zwei, oder in Groß ZWEI Elemente um das zu steuern. :ironie:
    Hier ->
    http://jsfiddle.net/sgcer/1145/

    Der Einfachheit halber ist der Inhalt in beiden Divs gleich, so können wir die höhe direkt auf den 2. Div mappen.
     
    #12      
    imac123 gefällt das.
  13. imac123

    imac123 Nicht mehr ganz neu hier

    Dabei seit:
    15.07.2013
    Beiträge:
    165
    Overflow Scroll -ausblenden oder....
    @tr4ze jetzt habe ich verstanden was du meinst. :danke::daumenhoch

    Die Frage ist nur, welcher Browser meckert bei dieser Lösung? bestimmt IE ?:rolleyes: kann leider jetzt nicht mehr Testen.
     
    #13      
  14. tr4ze

    tr4ze Mod | Forum Teammitglied PSD Beta Team

    422
    Dabei seit:
    02.09.2006
    Beiträge:
    2.057
    Geschlecht:
    männlich
    Ort:
    Nordhorn
    Software:
    CS6, Intuos
    Overflow Scroll -ausblenden oder....
    Jquery 1.9 läuft noch auf IE 6/7/8 das CSS ist 2.1, sollte also funktionieren.
    Probleme wird es höchstens auf mobilen Browsern geben s.o..
     
    #14      
  15. imac123

    imac123 Nicht mehr ganz neu hier

    Dabei seit:
    15.07.2013
    Beiträge:
    165
    Overflow Scroll -ausblenden oder....
    Hmm bei mir funktioniert das mit Scrollen immer noch nicht ..

    Immer wenn ich div {...} aktiviere dann verschiebt sich alles (zb. Navigation ist anders platziert)...sobald ich div{...} auskommentiert habe sieht die Seite ok aus...

    Kann ich ein anderes Element ausser div{...} setzen? mit zb. div#top{...} geht auch nicht..
     
    #15      
Seobility SEO Tool
x
×
×