kostenloser Webspace werbefrei: lima-city

Optimierung für Smartphone: Scrollbar nicht anzeigen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   j*********r

   13:02, 29.7.2015

   Hallo!
   
   Wenn man am Handy scrollt, also eigentlich nur auf dem Bildschirm nach unten zieht, wird rechts auf der Website meistens ein Balken angezeigt. Ich möchte nun diesen nicht anzeigen lassen; das funktioniert aber nicht mit
   

   overflow-y: hidden;

   
   weil ich immernoch scrollen können möchte - nur der Balken soll verschwinden.
   
   Gibt es eine Möglichkeit dazu? Wenn ja, wie funktioniert das?
   Natürlich handelt es sich nur um eine kleine Optimierung, deshalb wäre auch erst einmal irrelevant, wenn das ganze nur bei bestimmten Browser(versionen) funktioniert etc.
   
   mfg
   Jonas

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. lumix

   lumix hat kostenlosen Webspace.

   11:01, 3.8.2015

   /* DEN SELECTOR #myElement bitte wie benötigt ändern */
   
   /* set vertical-scrollable and horizontal-nonscrollable */
   #myElement {
     overflow-y: auto;
     overflow-x: hidden;
   }
   
   /* set on webkit scrollbars invisible, alternative you can use display:none; */
   #myElement::-webkit-scrollbar {
     opacity: 0;
   }
   
   /* set on IE10 scrollbars invisible */
   #myElement {
     -ms-overflow-style: none;
   }
   
   /* set on IE5.5+ scrollbars invisible */
   #myElement {
     scrollbar-base-color: transparent;
     scrollbar-face-color: transparent;
     scrollbar-highlight-color: transparent;
     scrollbar-3dlight-color: transparent;
     scrollbar-shadow-color: transparent;
     scrollbar-darkshadow-color: transparent;
     scrollbar-track-color: transparent;
     scrollbar-arrow-color: transparent;
   }
   
   /* set on IE8+ scrollbars invisible */
   #myElement {
     -ms-scrollbar-base-color: transparent;
     -ms-scrollbar-face-color: transparent;
     -ms-scrollbar-highlight-color: transparent;
     -ms-scrollbar-3dlight-color: transparent;
     -ms-scrollbar-shadow-color: transparent;
     -ms-scrollbar-darkshadow-color: transparent;
     -ms-scrollbar-track-color: transparent;
     -ms-scrollbar-arrow-color: transparent;
   }
   
   /* set on IE10 scrollbars invisible */
   #myElement {
     -ms-overflow-style: none;
   }

   StylingScrollbars für Webkit-Browser(Safari/Chrome/Opera/...)
   https://www.webkit.org/blog/363/styling-scrollbars/
   https://css-tricks.com/custom-scrollbars-in-webkit/
   
   StylingScrollbars für InternetExplorer:
   https://docs.webplatform.org/wiki/css/properties/-ms-scrollbar-face-color
   -ms-scrollbar-3d-light-color
   -ms-scrollbar-arrow-color
   -ms-scrollbar-base-color
   -ms-scrollbar-darkshadow-color
   -ms-scrollbar-face-color
   -ms-scrollbar-highlight-color
   -ms-scrollbar-shadow-color
   -ms-scrollbar-track-color
   
   Bitte beachten, sollte auf Firefox(Gecko) Browser das Scolling/Overflow auf dem HTML-Element liegen,
   so kann es sein das bei ein und dem selben Document das Scrolling/Overflow hingegen bei Webkit-Browsern auf dem BODY-Element liegt.
   Dies hier nur als kleine Hilfe zur Fehlerursachensuche, falls mal was nicht wie gewünscht auf allen Browsern gleichermassen klappt.
   Ich persönlich empfehle, falls möglich, entsprechende DIV-Container zu verwenden und diese gezielt mit dem Style "overflow: auto;" zu versehen.
   Man kann sich aber auch auf das Spiel mit "HTML oder BODY" einlassen, nur ist eben entsprechend zu berücksichtigen das die CSSRegeln dann beide Elemente je verwendeten Browser regeln muss.
   
   ----
   
   Man kann statt "StylingScrollbar" auch eine Alternative-Lösung verwenden,
   indem man den DIV-ContainerB welcher das "overflow: auto;" besitzt einfach um die ScrollbarDicke breiter/höher macht via grösseren Innenabstand(padding)
   und das Elternelement(DIV-ContainerA welches diesen DIV-ContainerB enthält) eben fast genauso gross (also ohne dem zusätzlichen Padding) setzt plus dem Style "overflow: hidden !important". So wird die Scrollbar selbst in den HiddenOverflow-Bereich verschoben und ist nicht am Schirm zu sehen.
   Diese Lösung funktioniert für alle Browser, hat jedoch die Einschränkung das man einen zusätzlichen ElternElement-Container benötigt.
   
   ----
   
   Auf Mozilla/Firefox(Gecko) gibt es leider momentan noch keine Lösung um die Scrollbar frei gestalten zu können via CSS.
   Dafür haben Mozilla/Firefox(Gecko) Browser als einzige eine schöne Lösung um Smooth-Snapping-Scrollbar-Positions zu setzen.
   Das hat zwar nichts mit der Frage "Scrollbar verstecken" zu tun, aber trotzdem der vollständigkeitshalber weils mit CSS und Scrollbars zu tun hat.
   Siehe hier:
   https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-coordinate
   scroll-snap-coordinate
   scroll-snap-destination
   scroll-snap-points-x
   scroll-snap-points-y
   scroll-snap-type
   scroll-snap-type-x
   scroll-snap-type-y
   
   -------
   
   Fast alles zu dem Thema findet man auch hier:
   http://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page
4. Autor dieses Themas

   j*********r

   11:35, 3.8.2015

   Danke! Ich werde das dann demnächst ausprobieren und schauen, ob das auch funktioniert...
   
   mfg
   Jonas

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?