Question
Covance Inc
US
Last activity: 1 Mar 2019 11:08 EST
How to show scroll bar always on apple devices with out user touching the screen
Hi All,
We have a Web Application where we show scroll bar for user to scroll.
That scroll bar is working fine in Desktop Browsers and Andriod Browsers but not in Apple Devices (Safari Browser)
Current Behavior :
Scroll bar is showing up on when user touch the screen and scrolls UP/DOWN in Apple Safari Browser, which is iOS default behavior.
Expected Behavior:
Scroll bar should be shown by default with out any user interactions.
I have tried below code but no luck
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
Hi All,
We have a Web Application where we show scroll bar for user to scroll.
That scroll bar is working fine in Desktop Browsers and Andriod Browsers but not in Apple Devices (Safari Browser)
Current Behavior :
Scroll bar is showing up on when user touch the screen and scrolls UP/DOWN in Apple Safari Browser, which is iOS default behavior.
Expected Behavior:
Scroll bar should be shown by default with out any user interactions.
I have tried below code but no luck
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
***Edited by Moderator Marissa to update SR Details***
Pegasystems Inc.
IN
Since OS X Lion, the scrollbar on websites are hidden by default and only visible once you start scrolling. However, you can overwrite the default and force the scrollbar in WebKit browsers back like this:
<style>
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
}
</style>
You can also refer below links and see if that helps :
Covance Inc
US
I tried this, This is working in Mobile only if we switch browser from View Mobile Site to View Desktop Site.
This is working only if browser is in Desktop View option.
Is there any code where we can handle View in Mobile Site scenario ?
Pegasystems Inc.
US
Hi Sreenivas,
The problem is that Apple introduced this as a Human Interface Design feature deep within iOS. The concept is that gestures should be intuitive and indicators present only whilst interacting. There is an exception where the user is paging (left/right swipe) the a page indicator can be displayed the standard dots you see at a bottom of your iOS home screen. App are going as far as to reject certain apps that do not meet HID design, so adding in scrollbars could get your app rejected potentially if it were to enter the App Store.
If you really wanted a scrollbar you could implement something with some CSS and JavaScript. You would need to put a container on the right next to your scrollable content and listen for scroll events on the content and position an inner element which is say height: 10vh; padding: 0; border: 1px #333 in your on your container based on these events. You could adjust height base on scrollable content with JS if you want to get elaborate. As a word of warning, only do this for an internal Enterprise app and not something destined for the AppStore.
Regards
Ian