Styling scrollbar for iOS safari - javascript

I'm using ::-webkit-scrollbar, ::-webkit-scrollbar-thumb, and ::-webkit-scrollbar-track to style a scrollbar in a DIV, and it's working perfectly.
But while I was testing it on iOS safari, I noticed that the scrolling isn't smooth (doesn't use "Momentum Scrolling"). I could fix it by using the following css on it:
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
That made the scrolling smooth, but the styling is gone.
So my question: is there any way to keep the scrollbar smooth on iOS devices while the scrollbar styling is taking effect?

Related

Unable to scroll div on Firefox using a trackpad. Working on Chrome

I have a container in React, which is scrolled to bottom by default and user can scroll up if he/she wants. Also, we want to show the scrollbar only after the user scrolls, so it is overflow:hidden by default, and once the user starts scrolling, we listen to the wheel event, and add a class to make it overflow:auto, and then the container scrolls.
Now, this behaviour is working fine for Chrome but is not working on Firefox when then user is trying to scroll up using laptop trackpad.
On Firefox, on the first scroll swipe, only the scrollbar appears and the container does not scroll. It scrolls only on scrolling the 2nd time.
Please check the behaviour here -
https://jsfiddle.net/naman_anand/5qf79cka/33/
Any idea as to why this difference of behaviour in Chrome & Firefox?
any leads will help. Thank you.
try hiding the doing this instead of overflow attribute
#element::-webkit-scrollbar {
display: none;
}
be sure to change the #element to your container.
To hide the scrollbar use -webkit- because it is supported by major browsers (Google Chrome, Safari or newer versions of Opera)
.element::-webkit-scrollbar { width: 0 !important }
-moz- (Firefox):
.element { overflow: -moz-scrollbars-none; }
-ms- (Internet Explorer +10):
.element { -ms-overflow-style: none; }

How do I fix a sticky scroll on a mobile responsive website?

I am building a mobile responsive website.
I noticed that when scrolling the page using an iPhone, the scroll is sticky and not smooth, while on android mobiles it's ok.
What can be the cause of this sticky scroll? I cant even see it on my browser! Please take a look at my code on JSfiddle. The images won't load but you don't need them anyway (you can see their borders). I recommend you to use 320px width to view the page so the icons are all organized.
So there is this line you can add to your body or the main div: -webkit-overflow-scrolling: touch;
Made the trick.

Smooth scroll having trouble in webkit browsers

Im working on a website that has a sticky nav and a smooth scroll anchor in firefox and ie everything works fine. But in chrome and Safari the smooth scroll will not work.
To get the smooth scroll to work I removed the overflow styling from the html tag:
html, body{
overflow-x: hidden;
overflow-y: auto;
}
and the smooth scroll works but then the sticky nav stopped working.
I might have to redo the sticky nav to make this all work but if there a simple solution I would love to here it.

Javascript or JQuery over scroll

I have a table body
<tbody id='displaylaps' class='scroll' style='width: 100%'></tbody>
Which fills with data and scrolls when it reaches a certain vertical length.
I wanted to have an over scroll effect like the effect after an iOS safari page ends and bounces back. Also needs to be iOS touch compatible.
Do you want to accomplish this on iOS or in a desktop web browser?
For iOS, simply add this to your CSS:
#displaylaps {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
Alternatively, you can use iScroll library for desktop webkit browsers

Single finger scroll in Safari not rendering html until scroll finishes

In a mobile web application I have a div which can be scrolled with the new fancy -webkit-overflow-scrolling: touch. The only problem is that the content is being rendered only when the scrolling finishes. Is there a way to make Mobile Safari (and maybe other mobile browsers, like that one in Android) render the html during single finger scroll?
.layer-content {
position: absolute;
top: 112px;
bottom: 0;
width: 100%;
background: #e6e6e6;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
You can work around this by using hardware acceleration. Try adding the following CSS to elements inside .layer-content:
-webkit-transform: translate3d(0,0,0);
Not really. That is just the way the iPhone works. If you scroll, all resources are used to make the scrolling very smooth, at the expense of not showing the new parts. You could maybe fool the browser into thinking the layer is bigger, by making it bigger, and add a layer on top of the part you don't want to show, but this doesn't work for all layouts. I would just leave it be. Users are used to it, as normal pages have the same 'rendering issue'.
The position: absolute is messing with the rendering. The Mobile Safari will not render elements that does not have the standard value for positioning, until the scrolling have come to a halt.
If the position is auto (the default value), Mobile Safari will render the element as you scroll.
I'm pretty darn sure I just solved this with:
overflow-y: auto;
Add that to your scrolling element.
(Presumably just overflow: auto; would work too depending on your needs.)

Categories