Smooth scroll having trouble in webkit browsers - javascript

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.

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; }

Styling scrollbar for iOS safari

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?

Is there a way to hide the browser on-scroll if the body isn't what's scrolling?

I have a page that has a center div that is the keeper of all the content (I need this in order for the page to center and for there to be a top and bottom nav that are persistent), however, what I can't get it to do now is to slide the addressbar away when I scroll down (as it would if the page itself was scrolling) in mobile browsers. Because what's scrolling is the content of the div, the browser address bar persists.
I'm curious if there's a manual command that I can issue to perform said hide/show of the browser elements when this div scrolls down from its top coordinate.
I'm only concerned in making this work in modern mobile browsers like webkit, safari, firefox, and chrome.
If your intention is making the addressbar fixed position (not scrolling) when on desktop browser, but static (scrolling) on mobile browser, you can use media queries.
Example
html
<div id="address-bar">
<!-- content -->
</div>
css
#address-bar{
position: fixed;
top: 0;
}
// on lesser width (mobile screen) it will override above rule
#media (max-width: 480px) {
#address-bar{
position: relative;
}
}

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.

persistent nav below header for mobile (like iOS7 browser)

This issue is giving me a serious headache and delaying my project because I cannot figure it out.
I am trying to create a mobile friendly website and am performing the tests in iOS7/OSX.
Basically I have a header, a nav below it, and below that all the content. When the user scrolls down, I want the header to smoothly to dissapear, and then the nav bar will clip (fix) to the top of the browser. So far this seems to be possible with only CSS3, but it isn't perfect, and javascript makes the nav bar "snap" to the browser once the scrolling has stopped. Furthermore, I would like to make it so when I scroll up, it will show the header, regardless if im in the middle, top, or bottom of the page. This works just like the header and footer in the iOS Safari browser. When you scroll down everything slides away, but then when you scroll back up, the footer and header reveal themselves.
I need to accomplish this, preferably without JS, but that doesnt seem possible.
So, can someone PLEASE show me or link me to a tutorial that can show me how this is done and what it is I exactly need? I would greatly appreciate it. And keep in mind it must work smoothly on mobile browsers.
Using position: sticky for the nav could be close to what you are after. It is supported by Safari in ios7 at least (demo). Try adding something like this to your nav:
.nav {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 15px;
}
For more complex behaviour, like the header appearing again when you are scrolling up, you will probably need to resort to javascript.

Categories