How to disable scrolling on mobile browsers? - javascript

I'm trying to disable scrolling on a web page when an user open a popup (but he can scroll it).
The popup element has following attributes:
#popup {
display: none;
width: 100%;
height: 100%;
z-index: 10;
position: fixed;
background-color: #3F3F3F;
overflow: auto;
left: 0;
top: 0;
}
And when the user opening a popup, the following code is called:
$('#popup').show();
$('html').attr('style', 'overflow: hidden;');
$('body').attr('style', 'overflow: hidden; position: relative;');
This solution perfectly work on a desktop browser, but unfortunatly not on mobile.
On mobile, it always possible to scroll (but the scroll speed is slow).
How can I disable also scrolling on mobile browser?
Thanks in advance.

Change body position to fixed. That will disable the scroll.

Related

How do I configure a full height Angular Material Dialog that closes when clicking on the overlay?

In my popup window, all info and inputs are usually fully displayed when first triggering it, however, I have a textArea box that I can expand to whatever height. Upon expansion, I want the entire popup to scroll on the page, not just that particular div which holds the expanded textArea.
I'm using this bit of CSS to make my popup window full height and scrollable when I expand the textArea.
.cdk-global-overlay-wrapper {
display: flex;
position: absolute;
z-index: 1000;
overflow: auto;
pointer-events: auto;
padding-top: 100px;
margin-bottom: 100px;
}
Everything worked as intended with that bit of CSS, however, I noticed that the popup no longer closes when clicking the overlay, and it's due to the pointer-events: auto, but removing this bit of CSS brings me back to square one where the popup doesn't scroll with the page when I expand the textArea.
Any ideas on the quickest, cleanest way to have both behaviors?
Please use the below style.
.cdk-global-overlay-wrapper {
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
position: absolute;
z-index: 1000;
overflow: auto;
pointer-events: auto;
padding-top: 100px;
margin-bottom: 100px;
}

Improving dialog box scrolling

I have created a dialog box that is aligned to the middle of the screen using a combination of position:fixed, overflow:auto and display:table, as follows:
.dialog {
position: fixed;
left: 0; right: 0;
top: 0; bottom: 0;
z-index: 1000000;
background-color: rgba(193, 208, 145, 0.75);
text-align: center;
overflow: auto;
}
.dialog > div {
display: table;
width: 100%;
height: 100%;
}
.dialog > div > div {
display: table-cell;
vertical-align: middle;
}
.dialog > div > div > div {
display: inline-block;
text-align: left;
min-width: 300px;
max-width: 640px;
border: 1px solid #004000;
background-color: #e2ffcd;
border-radius: 6px;
}
Demo
This works to good effect, however a problem is encountered when the contents of the dialog box are larger than the screen - this happens fairly often on mobile devices, but it can also happen on desktop in certain cases depending on contents.
When this happens, scrolling becomes awkward. On desktop, the user sees two scrollbars, and using the mousewheel will scroll the page behind the dialog box if the dialog itself has reached the end. On mobile, it seems to take some serious persuasion for the touchscreen to understand that the user wants to scroll the dialog, not the entire page. Testing on my 3DS Browser was the worst as the circle-pad would scroll the entire page, not the dialog.
How might I go about improving this situation? Ideally I'd want the page's contents to be locked in place while the dialog itself sort of "becomes" the main page for the purposes of scrolling. Note that the dialog is created by JavaScript, so JS-based solutions to this problem are acceptable.

Scrolling iframe on iOS causes the page to scroll

I have an application that displays an iframe that the user needs to be able to scroll on an iPad.
Apparently you can't scroll iframes and other elements by default on iOS unless you use the special -webkit-overflow-scrolling in the CSS.
So for example I have the following HTML (based on David Walsh's solution here: http://davidwalsh.name/scroll-iframes-ios)
<div class="frameContainer">
<iframe src="./frame.html"></iframe>
</div>
and the CSS:
*
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
html,
body
{
height: 100%;
background: #ff0000;
}
.frameContainer
{
position: absolute;
top: 40px;
left: 80px;
right: 80px;
bottom: 40px;
background: #ffffff;
overflow: auto;
-webkit-overflow-scrolling: touch;
/* removes spacing below iframe */
font-size: 0;
line-height: 0;
}
.frameContainer iframe
{
width: 100%;
height: 100%;
}
However you can cause the page (red area) to bounce and lose focus of the iframe by either flicking the page (around the iframe) or by varying the speed at which you flick (e.g. dragging with your finger slowly). Or by tapping on the page around the iframe.
Demo here: http://preview.na-software.co.uk/Demo/ipadscroll/
I've tried some plugins like: http://www.hakoniemi.net/labs/nonbounce/ to prevent the page bounce, but because it's an iframe, it still causes the page to have a bounce effect when interacting with the frame because it's a different document level. I've also tried bubbling up the touch events from the iframe to the parent level so the plugin catches it, but the page can still bounce.

Can't detect scroll event since Chrome update

I just updated Chrome Mac to v41.0.2272.101 and realized that I was now unable to detect JavaScript scroll event on window when my full-screen element has overflow: hidden. Don't know why it used to work a few days ago, but I just didn't touch my code since the update.
Weird thing is: it works on Safari.
I created a simple Fiddle to show you: https://jsfiddle.net/4cd2uf0c/3/
Example:
<div class="scroll-div"></div>
.scroll-div {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: red;
overflow: hidden;
}
$(window).on('scroll', function() {
alert('This used to work before on Chrome Mac');
});
Any ideas or workaround?
Thanks a lot!

Responsive Slider image gets overlapped by menu when browser window expands

Can't seem to source why the image in this full-width slider, when the browser window is fully expanded, gets overlapped slightly by the menu above it.
It looks perfect in mobile, tablet, it's desktop that is posing the problem. Here's a link, open and close the window and you'll see what I mean:
[linked removed]
thanks!
Aha! Found it!
Ok so when your window is small enough to "qualify" as a mobile device, you have one very important property set on your header:
position: static;
This means that the header is in the flow of the document. When you change to desktop size, that gets changed to
position: fixed;
This takes the top header out of the flow of the document, sliding the other content up into its place.
So, to fix this, you can do something like this:
#media screen and (min-width: 700px) /*<--your min desktop width here*/
{
body
{
margin-top: 40px; /*header height here*/
}
}
Was doing some detective work, two things happened, one, I added a fix for a Chrome bug earlier on in the header:
body:after {
display: initial;
position: absolute;
top: 0;
visibility: hidden;
}
And second, needed to compensate for it with padding:
.iosSlider .slider .item img {
width: 100%;
height: auto;
float: left;
padding-top: 15px;
}
Domino effect.
use below code in navigation div css file
position: relative;
z-index: 100;

Categories

Resources