I've got a site, and I want to disable all scrolling when a lightbox pops up, and then re-enable it when the lightbox is closed.
I've got this:
document.ontouchmove = function(e){
if (stopScroll) {
e.preventDefault();
}
}
Which works great for manual scrolling, but the user can still tap the status bar and get taken to the top of the page (and now the lightbox isn't centred anymore, or worse still, totally off the page). I'm using JQuery Mobile. How can I temporarily disable this functionality in iOS?
I don't believe this is possible. A better solution to the problem would be to prevent your lightbox from breaking when scrolling occurs by changing the lightbox position to fixed instead of absolute:
</style>
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
background:#ccc;
width:100px;
height:100px;
}
</style>
<div class="centered">I won't scroll off page</div>
Another option is to check for the scroll event and restore the original position:
$('.show_popup').on('click', function(){
var position= $(window).scrollTop(); // save pos
// show popup
$(window).scroll(function(){
$(window).scrollTop(position); // restore pos on scroll
});
});
$('.hide_popup').on('click', function(){
$(window).off(); // remove handler
});
Example: jsFiddle
Related
I have an absolutely positioned element over a scrollable area of my site. Clicking on this element will scroll the page down; it is for use by students with chromebooks that hide the scrollbars and do not provide a nice touchpad scrolling experience.
If a user (on Chrome) is scrolling manually, however, and the cursor slides over the absolutely positioned button, the page stops scrolling altogether. I would like for the page to scroll "normally" while the cursor is hovering over the button.
Capturing the wheel event and then making a new wheel event and dispatching it to the scrollable content does not work, I believe because .isTrusted is false.
As a workaround, I am capturing the wheel event and manually calling .scrollBy on the scrollable element. This does not scroll the page by the same distance though, and also results in jerky, stuttering scrolling.
elemScrollImg.addEventListener('wheel', (e) => {
console.log("Img scroll: ", e)
let deltaY = e.deltaY
// Wanted to make a new WheelEvent to pass to the container
// but isTrusted is false for "fake" events, and the page
// apparently just ignores them :-/
// https://stackoverflow.com/a/44462125
elemContent.scrollBy({
top: deltaY,
left: 0,
// smooth scrolling apparently just makes it all worse,
// esp. on touchpad scrolling.
// behavior: 'smooth',
})
https://jsfiddle.net/seatag/a8m1kw20/58/
Is there a recommended way to accomplish this?
I wound up using position: sticky to place the button inside the scrollable container, which allows wheel events to bubble up normally. This does not answer my question, but it does solve my problem.
.arrowWrapper {
position: sticky;
bottom: 15px;
padding: 6px;
padding-bottom: 15px;
width: 200px;
margin-left: auto;
margin-right: auto;
cursor: pointer;
background: #f00;
}
https://jsfiddle.net/seatag/yb02c4sa/8/
I build a website with skrollr, which is my personal plugin of the year.
It works well in most situations except on an iPad mini. I haven't had the opportunity to test it on other iOS devices yet.
The problem is, that the site doesn't start scrolling until after I stopped scrolling.
So, basically, I put my finger onto the screen and start dragging, and nothing happens. Only when I stop scrolling and pull my finger away from the screen, the site starts scrolling the correct way.
<div id="skrollr-body">
<div id="scene1" class="scene" data-anchor-target="#scene1-anchor"
data-0-top="visibility: visible"
data--1950-top="visibility: visible"
data--2000-top="visibility: hidden">
</div>
</div>
#skrollr-body {
height: 100%;
position: fixed;
width: 100%;
}
.scene {
width: 100%;
height: 100%;
top: 0%;
left: 0%;
position: absolute;
background-color: white;
}
<script>
var s = skrollr.init({
smoothScrolling: true,
keyframe: function(element, name, direction) {
// add videos only after scrolling for a bit
},
mobileCheck: function() {
// makes no difference :-(
return false;
}
});
</script>
</body>
Is this behavior to be expected? How can I make the browser scroll while I still have the finger on the screen?
Apparently, it's not a bug, it's a feature :-/
According to this answer to a similar question the whole "only move after touch event is over" is standard behavior for iPads.
So I guess I could go and rig something up for skroller to react not to the scroll event, but instead to react to the touchstart / touchend events.
Very unsatisfying...
On the website in the link below, the Logo stays on the bottom of the page when the window ist resized and the content beneath isn't visable till you scroll the site up or down. This works on mobile devices too.
How can I manage it to position a DIV to the bottom of the browserwindow so that the following DIV is hidden until you begin to scroll?
Here is a Link of a Site that shows exactly what I would like to reprogramm.
Please visit this Site as an example
Thanks in advance
CSS:
#element {
display: none;
/* and other CSS */
}
jQuery:
$(document).on("scroll", function () {
if ($(this).scrollTop() > 100) { /* change the integer to whatever you need */
$("#element").fadeIn("slow");
} else {
$("#element").fadeOut("slow");
}
});
First, the element has fixed positioning and is hidden:
#dynamic-to-top {
display: none;
overflow: hidden;
width: auto;
z-index: 90;
position: fixed;
bottom: 20px;
right: 20px;
top: auto;
left: auto;
...
Then, a jQuery function listens for the scroll event. It appears that a calculation is done to see whether the page has scrolled downward past a certain point. Many examples of this behavior exist on SO and the web.
I'm using jQuery-1.10.2 and I am using the function $(window).scroll. The $(window).scroll isn't being executed as I scroll on a mobile device, but rather when my finger releases the screen after scrolling. $(window).scroll is also delayed on IE10.
I use $(window).scroll to make a navbar scroll with the page by changing the css property top: on the position:fixed; navbar. When scrolled down for enough, the navbar ends up sticking to the top of the page as position:fixed. Is there a more compatible alternative to achieve the same results to my navbar? Is there a fix for mobile or IE10?
$(window).scroll(function () {
$('.navbar').css('top', Math.max(0, 350 - $(this).scrollTop()));
var scroll = $(document).scrollTop();
});
Here is a fiddle with no images. Look at the navbar. http://jsfiddle.net/93tzq/
If I'm understanding what you want to do correctly I'm pretty sure you're over thinking this.To keep a nav element at top while you scroll you don't need any js. All you need to do is set the z-index and position accordingly.
For instance:
.nav-overlay{
position: absolute;
top: 90px;
left: 10%;
z-index: 100;
display: block;
width: 50px;
height: 50px;
}
Then put the html as follow:
<nav class='nav-overlay'>
NAV BAR HERE
</nav>
You didn't specify your mobile browser, but this is a common question with Safari in iOS. MobileSafari does not trigger window.scroll until the scrolling has finished – this has been a problem addressed numerous ways (see iscroll, for example). Here's a similar post that may answer your question as far as making a sticky navbar.
I am using Twitter Bootstrap's modal window, and I noticed when you scroll, the modal popup stays fixed while the background page moves. For demo, you can click on "Launch demo modal" button in the following page:
http://getbootstrap.com/2.3.2/javascript.html#modals
How do I avoid that and let scroll event controls the modal window instead? The options Bootstrap offers does not seem to include that.
The modal pop up is a <div> with position: fixed, and that is why it stays fixed when I scroll. However I can't set it to other values since it needs to stay popped up. Also i figured that if I set <body>'s style to overflow:hidden, the scroll bar will be hidden. But that is not what I want.
$('.modal')
.on('shown', function(){
console.log('show');
$('body').css({overflow: 'hidden'});
})
.on('hidden', function(){
$('body').css({overflow: ''});
});
You can add overflow: hidden on body.modal-open as per this answer
I solve the shift with
body{
position: fixed;
left: 0px;
right: 0px;
/*margin: auto;*/
}