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.
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 implementing a fixed vertical menu. It works great on desktop and looks great on mobile devices (IOS, Android)... as long as you don't zoom in on the page. When you zoom on a mobile device, the fixed element begins covering the other page content (as it should since it's fixed to a certain place on the viewport).
But what I'm looking for is a navigation bar that's only fixed vertically. So if you zoom in and scroll horizontally the navigation bar doesn't cover the content. Is there a way to do this?
This is a common problem and as far as I know there is no way to fix only vertically using merely CSS. You have the choice between either:
Disable zooming using viewport meta tags (but this can be bad for accessibility).
Control the menu position using javascript on mobile devices. For instance by instead of using a fixed position, give it an absolute position and on every window.scroll event, update the top position of the menu. This however will result in unpleasant results on devices that aren't state of the art (so on most devices you will see the position update with constant shocks). Second issue will be the smooth scrolling on Apple devices which prevents you from getting any information about document scroll position during 'smooth scroll'. So you would then also have to disable the smooth scrolling (possible with a CSS line on the body) but this also gives the user a negative experience.
This is why the menu is usually turned into a hamburger icon and only appear once the hamburger icon is pressed. The little hamburger icon will not be so annoying in the top left corner during horizontal scroll, as it is quite small.
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!