I've made a footer reveal effect using css, using following two classes:
Content class applies to wrapping div above the footer.
.content { min-height: 100vh; background-color: white; /* Needed to obscure the footer behind it */ position: relative; /* Needed to make z-index work */ z-index: 1; /* Make sure the content is on top of the footer */ padding-bottom: 60px; /* Adjust according to your footer height */ }Footer Class applies to the wrapping div of footer content
.footer { background-color: black; position: sticky; bottom: 0; left: 0; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }This is working perfectly as far as the footer reveal effect is concerned. However since I have more content on footer than the view height of the mobile phone, Some of the content in footer gets hidden, for which I want to allow the scrolling on sticky footer.I searched through internet and found solution of adding overflow-y-auto, and defining a max height of the footer div.
I applied and test on chrome developer options. This strategy is working on Iphone SE and Samsung S8+ devices, however google pixel 7, iphone 14, iphone 12 and iphone XR donot seem to work well with it.I'm hoping that someone can guide me what Should I do to enable the scrolling on other mobile devices too.