I have an element (lets call this scroll-list-one), which is a list that scrolls vertically. It works great.
I also have another element, which also has a list that scrolls vertically (lets call this scroll-list-two). This occasionally gets presented over scroll-div-one as a popover. This scrolling works great too.
The issue HOWEVER, is that when I scroll scroll-list-two with the swipe touch gesture on mobile, it scrolls scroll-list-two AND scroll-list-one below it.
How do I ensure that the touch gesture doesn't get passed to the element below it? I only want to scroll the top element.
According to this link, the solution is to do the following, which was the solution:
Add -webkit-overflow-scrolling: touch to the top element
Also: strangely this only occurred for ios, was not an issue with android
Related
Imagine you have nested elements on a webpage like one textfield inside a parent-div-element. The content of the textfield overflows the textfield dimensions. The textfield itself and several different elements are inside a parent-div. All those elements are overflowing the parent-div's dimensions, too.
Now if you will focus the textfield and scroll up or down, the content will scroll to the bottom or top of it's content. But: After the bottom or to is reached, the parent div will scroll to it's bottom or top.
This is an unwanted behaviour and I wonder if there is a way, a shortcut, a setting or extension to prevent the browser / OS from doing that.
The wanted behaviour is: I scroll to the bottom of a textfield and only if the focus changes or at least the mouse cursor leaves the textfield, the parent element shall scroll down.
This occurs in Chrome, Firefox and Safari on OS X High Sierra 10.13.2. In Chrome there is a seamless scrolling, Firefox and Safari will prevent the parent from scrolling unless you initiate scrolling again. On Windows 10 and Firefox it is even more delayed, but still occuring - which makes it even harder to control. On Windows 10 and Edge it's seamless, too.
I have one issue for iOS device when i focus on input cursor of input does not stay fix it scrolls with page scroll.
Added one solution for cursor issue but its behaviour is like when scroll page by dragging cursor moves and take it position again this small issue occurs other wise scrolling cursor is solved just need to check for another issue
First solution is give -webkit-overflow-scrolling: auto to scroll-content div but when its applying it cause hard scrolling
Second solution is disablescroll(true) to page but it gives current behaviour that is cursor moves and then get its position
Need better solution for this issue.
This wasn't happening previously for me, but I updated to iOS 9.3 two weeks ago and now hidden elements on my web page are hidden when the keyboard is displayed or another input is selected.
Annoyingly a top fixed element is only hidden if the page is scrolled, and the bottom is always hidden. This seems to be a way to 'solve' the issues encountered with fixed elements being left in random positions on the screen when the keyboard is displayed, but now I've got a situation where the elements don't reappear reliably, meaning I lose my main navigation bar for my app.
Is there any way to disable this auto-hiding behaviour? I've created a barebones page that shows the behaviour here: http://128.199.171.247/test.html
I'm using bootstrap for whole website, and i need to have floating sidebar.
Unfortunately, fast scrolling using e.g. "overscroll" method causes bug - when sidebar should have "affix-top" class, it still has just "affix" class.
Also, just a little bit of scrollbar movement fixes problem immediately.
Regular scrolling using mouse wheel or touchpad/trackpoint works perfectly.
Using word "overscroll', i mean the behavior while scrolling using left mouse button, when cursor reaches bottom of the window and some margin (50px?), then scrollbar immediately reaches top.
Situation:
Mobile phone equipped with jquery, jquery mobile, jquery-ui.touch and jquery.ui.touch-punch, the latter to make quite some things like drag/drop etc available for touch screens.
Two div blocks from which to drag bullets from one sortable div block into other sortable div block.
On the screen those two blocks are visually adjacent to one another to make things work although suboptimal, because bullet disappears when dragged into the other div block. Nevertheless it can be dropped somehow because afterwards bullets appear indeed in target div block and disappear in original div block.
With help of css option overflow: auto, one can make scrolling appear in both blocks to scroll through the list of bullets.
Problem:
These scrolling sometimes work and sometimes not because in the latter case either the whole page starts scrolling or (after clicking on local div scrollbar) it starts zooming-in to such a level/depth that the whole page becomes useless.
In Firefox Mobile div scrollbars not visible but scrolling sometimes possible; in Opera Mobile div scrollbars visible but at random "deeply" zooms in after clicking a div scrollbar.
Tried out different solutions given on the Internet to block page scrolling or zooming-in, but to no avail. Some "solutions" make page scroll is locked, but then either all scrolling is locked and/or dragging is also locked.
Question:
Anybody any experience with above situation or could give some hint? I know this is bleeding edge because even JQ/JQM (or any other framework?) has not reach this point at the moment, though they are working on it.
jquery.ui.touch-punch is a plugin, although experimental, itś the only way I know so far who make drag/drop etc available for mobiles/touchscreens.
Thank you very much in advance!