IOS - vertical scrollbar doesn't appear in default + doesn't work

Asked
Active3 hr before
Viewed126 times

4 Answers

verticalappeardefaultscrollbardoesn
90%

However I don't believe that it will be obvious to some users that there is more content there. They could scroll down the page without knowing that my div actually contains a lot more content. I use the height 510px so that it cuts off some text so on some pages it does look like that there is more content, but this doesn't work for all of them.,Just ran into this problem myself. OSx Lion hides scrollbars while not in use to make it seem more "slick", but at the same time the issue you addressed comes up: people sometimes cannot see whether a div has a scroll feature or not. ,This will make the scroll bars always display when there is content within windows that must be scrolled to access, it applies to all windows and all apps on the Mac:, 1 Yeah, sounds like you have some other CSS quirks going on to cause that, this should display the scrollbar always. Make sure the div's wrapping this one are styled properly. – Shawn Steward Sep 20 '11 at 21:42

The fix: In your css include -

::-webkit - scrollbar {
      -webkit - appearance: none;
      width: 7 px;
   }

   ::-webkit - scrollbar - thumb {
      border - radius: 4 px;
      background - color: rgba(0, 0, 0, .5);
      box - shadow: 0 0 1 px rgba(255, 255, 255, .5);
   }
/* always show scrollbars */

::-webkit - scrollbar {
      -webkit - appearance: none;
      width: 7 px;
   }

   ::-webkit - scrollbar - thumb {
      border - radius: 4 px;
      background - color: rgba(0, 0, 0, .5);
      box - shadow: 0 0 1 px rgba(255, 255, 255, .5);
   }

/* css for demo */

#container {
   height: 4 em;
   /* shorter than the child */
   overflow - y: scroll;
   /* clip height to 4em and scroll to show the rest */
}

#child {
   height: 12 em;
   /* taller than the parent to force scrolling */
}

/* === ignore stuff below, it's just to help with the visual. === */

#container {
   background - color: #ffc;
}

#child {
   margin: 30 px;
   background - color: #eee;
   text - align: center;
}
<div id="container">
   <div id="child">Example</div>
</div>
load more v
88%

Note: ::-webkit-scrollbar is only available in Blink- and WebKit-based browsers (e.g., Chrome, Edge, Opera, Safari, all browsers on iOS, and others). A standardized method of styling scrollbars is available with scrollbar-color and scrollbar-width.,::-webkit-scrollbar-thumb — the draggable scrolling handle.,::-webkit-scrollbar — the entire scrollbar.,::-webkit-scrollbar-track-piece — the part of the track (progress bar) not covered by the handle.

.visible - scrollbar, .invisible - scrollbar, .mostly - customized - scrollbar {
      display: block;
      width: 10 em;
      overflow: auto;
      height: 2 em;
   }

   .invisible - scrollbar::-webkit - scrollbar {
      display: none;
   }

   /* Demonstrate a "mostly customized" scrollbar
    * (won't be visible otherwise if width/height is specified) */
   .mostly - customized - scrollbar::-webkit - scrollbar {
      width: 5 px;
      height: 8 px;
      background - color: #aaa; /* or add it to the track */
   }

   /* Add a thumb */
   .mostly - customized - scrollbar::-webkit - scrollbar - thumb {
      background: #000;
}
load more v
72%

scrollbar-width accepts the following values:,none will hide the scrollbar completely, without affecting the element’s scrollability.,With scrollbar-width, we can set the width to thin to save some space:,w3c Github discussion on scrollbar width control

With scrollbar-width, we can set the width to thin to save some space:

.scrollable - element {
   scrollbar - width: thin;
}
load more v
65%

'start' (the default) will align the snap at the left (horizontal) or top (vertical).,'end' will align the snap at the right (horizontal) or bottom (vertical).,'none' (the default), drags do not dismiss the keyboard.,'auto' - Default value, allow a user to over-scroll this view only if the content is large enough to meaningfully scroll.

.css-vem1e6{color:var(--expo-theme-text-default);font-family:expo-brand-mono,Monaco,Consolas,'Liberation Mono','Courier New',monospace,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-size:13px;line-height:20px;white-space:inherit;padding:0px;margin:0px;}.css-vem1e6 .code-annotation{-webkit-transition:200ms ease all;transition:200ms ease all;transition-property:text-shadow,opacity;text-shadow:var(--expo-theme-highlight-emphasis) 0px 0px 10px,var(--expo-theme-highlight-emphasis) 0px 0px 10px,var(--expo-theme-highlight-emphasis) 0px 0px 10px,var(--expo-theme-highlight-emphasis) 0px 0px 10px;}.css-vem1e6 .code-annotation:hover{cursor:pointer;-webkit-animation:none;animation:none;opacity:0.8;}.css-vem1e6 .code-hidden{display:none;}.css-vem1e6 .code-placeholder{opacity:0.5;}import React from 'react';
import { StyleSheet, Text, SafeAreaView, ScrollView } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollView}>
        <Text style={styles.text}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
          ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
          est laborum.
        </Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
  },
  scrollView: {
    backgroundColor: 'pink',
    marginHorizontal: 20,
  },
  text: {
    fontSize: 42,
  },
});
load more v

Other "vertical-appear" queries related to "IOS - vertical scrollbar doesn't appear in default + doesn't work"