Overflow Scroll -ausblenden oder....

[imac123]

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:

overflow: scroll

erstellt.


Hier noch Link:

Danke

 

[Myhar]

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.

 

[dn3d_fanboy]

Wie Myhar schon schrieb, es wäre echt gut, den Code der Seite zu kennen. Aus deinem Bild werde ich leider auch nicht schlau.

 

[afr0kalypse]

schau dir das mal an
http://mottie.github.io/Pathslider/builder.html

 

[Myhar]

Und damit kann er dann das scrolling auf einer Seite realisieren?

 

[imac123]

Hallo es ist kein Bild, sonder ein Radius...

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

CSS

border:12px solid black;
border-bottom-right-radius:45%;
border-bottom-left-radius:45%;

Das es keine Möglichkeit für ein Bild hat kann ich verstehen,,aber für Radius ?


@afr0kalypse da werde ich auch nicht schlauer hmm...wie soll das funktionieren?

 

[tr4ze]

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/

 

[imac123]

Hmm brauche ich doch keinen jQuery ... Die Scrolleiste wird jetzt hinter dem schwarzen Rand weitergeführt ....

#inhalt{
    margin-left: 10px;
    margin-right: 5px;
    margin-bottom: 10px;
    /*border: 1px solid #333;*/
    /*overflow: hidden;*/
    height: 830px;
    width: auto;
    overflow: scroll;
    /*background: gray;*/
    background: transparent;
    z-index: 2;
    border-bottom-right-radius:47%;
    border-bottom-left-radius:40%;
    }

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

.container {
    border:25px solid #000;
    border-bottom-right-radius:50%;
    border-bottom-left-radius:45%;
    z-index:17;
    overflow: hidden;
    }

 

[imac123]

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




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




Danke.

 

[tr4ze]

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.

 

[imac123]

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

 

[tr4ze]

Du brauchst 2, in Worten zwei, oder in Groß ZWEI Elemente um das zu steuern.
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.

 

[imac123]

@tr4ze jetzt habe ich verstanden was du meinst.

Die Frage ist nur, welcher Browser meckert bei dieser Lösung? bestimmt IE ? kann leider jetzt nicht mehr Testen.

 

[tr4ze]

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

 

[imac123]

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