![]() ![]() There is a potential bug though if you need a scrolling div within a panel and the div’s max-height is less than the panel height. Would just removing the max-height property work in your case? The panel will scroll automatically if the content overflows the panel. ![]() Since updating to IOS8, -webkit-overflow-scrolling: touch stops you being able to scroll whatsoever, and the only way I have been able to fix this so far is by removing -webkit-overflow-scrolling: touch which leaves the standard sticky scrolling. Scrolling does work if you either increase the max-height property or make the panel smaller or just remove the max-height property. Javascript listens for scroll events and the elements position in the document, and once the math adds up you add a. I'm working on a web app that uses -webkit-overflow-scrolling:touch in several places to give the overflown divs inertia scrolling. If the height of the panel is greater than 300px then scrolling will not work on mobile. So to make this easier to repro than having a plugin, using the text panel again: The official iOS bug-report about overflow:hidden has been created in 2016 solved only in May 2019 but they have no idea when it will be released.It is something to do with the max-height css property combined with the actual height of the panel. The snippet can be used regardless of the class-names you are using in your project. Var observer = new MutationObserver(function(mutations) ) Creating our mutation observer, which we attach to overlay later Var overlay = document.querySelector('.w-nav-overlay') Webflow navbar always has "overlay" that is changing its display value when menu open/closes I am using the css trick to make a site feel like an app in Cordova. Var iOS = !!atform & /iPad|iPhone|iPod/.test(atform) Detecting if it is an iOS device, true/false If you put -webkit-overflow-scrolling:touch on any element other than document.body, it will break the default tap status bar to scroll to top behaviour. It additionally detects the OS of the device and does a bit of a different approach if it is iOS. This code below will work with Webflow navbar component and prevent the page from scrolling when a menu is open. I know it’s long time passed, but I thought I would share my version of the solution. ![]() **Insight:** the approach works more or less stably without using _-webkit-overflow-scrolling: touch_ and your plugins allow you to handle scroll event inside the _.background-content_ element instead of _body_ Inside of the _.overlay-content_ in browsers with a visible scroll bar (like windows' Chrome) those two scroll bars are visible always when the pop-up is active ![]() **Insight:** replace _.header_ from the _.background-content_ or delete _-webkit-overflow-scrolling: touch_ from bodyġ. header gets under a pop-up, despite the fact that its z-index bigger than the z-index of the pop-up. header (styles listed below), when you open the pop-up the. If inside the _.background-content_ element is. **Description:** Inside of the _.background-content_ or body (as the body element the property is inherited to the element _.background-content_ and including others in it) when you use the property _-webkit-overflow-scrolling: touch_ there is a problem with the overlay layers ( the z-index property ). If you add the property, then scrolling will be through the pop-up for no scrolling blocks ( the blocks with fitting content in the visible area completely). Apple has the following statement in their release notes: 'Added support for one-finger accelerated scrolling to all frames and overflow:scroll elements eliminating the need to set -webkit-overflow-scrolling: touch. **Description:** Inside of the unit _.background-content_ you can't use the property _-webkit-overflow-scrolling: touch_, what enables to smooth scrolling (without the initial iOS "clumsy" scrolling) and normalization of the scroll when focusing inputs (more info: _). I can confirm that this approach worked, but it looks like it doesnt work any longer on ios 13. **Description:** the Approach works only in this case lost the ability to track the _scroll_ event on the _window_ object, due to "reset" of height of the _body_ (equal to the height of the browser's window): If something is not clear for you, ask me I'll fix it later. I'm sorry for my English, I use the initial translation because I'm so tired tes … ting this approach. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |