Lock parent scroll, only allow div to scroll - javascript

I have created a popup div which pops up over the main page. It is position:fixed; and with overflow:scroll;.
The issue is, unless the user positions their mouse over this div, the scroll feature on touch mouses or scroll wheels, scrolls the parent window - not the div. The same applies to trackpads.
Is there a way to lock the scroll of the parent window, and set the div as the scroll through jQuery? I have found a lot of posts about the opposite - with people wishing to look the div scroll and use the parent.
Any help would be greatly appreciated.

If you want to use jquery, here's a way you can set the body's overflow to hidden whenever the popup occurs and undo that whenever the popup goes away:
css:
body.popup-open {
overflow: hidden;
}
and jquery:
$("#popup").on("show", function () {
$("body").addClass("popup-open");
}).on("hidden", function () {
$("body").removeClass("popup-open")
});

Related

CSS: Scroll on fixed position menu overlay without 2 scrollbars?

I have an issue where a fixed-position menu needs to be scrolled, but the outer body already has scrollbars. Even if I remove the outer body's scrollbars then the menu div's scrollbars intersect with the "Close" button, which itself is fixed at the top-right of the screen.
From the image you can see that there are two scrollbars and the inner bar intersects the "Close" button. I'd like to have only 1 scrollbar and no intersect. However, when the menu is closed the scrollbar needs to scroll the page, and when the menu is open it needs to scroll the menu (which is in a fixed position div.)
Is there a way I can use the scrollbar from the entire page to scroll the page when the menu is closed and to scroll only the menu when the menu is open?
Or is there another way to achieve the desired effect?
Here's the code I suggest to freeze the webpage behind the menu when the menu is open:
var top;
function menuOpen() {
top = $("body").scrollTop();
$("html").css({"position":"fixed", "top":-top});
}
function menulose() {
$("html").css({"position":"static", "top":0});
$("html, body").scrollTop(top);
}
Following css is required for it to work properly:
html {
width: 100%
height: 100%;
}
Let me know if this code works, if not it migth be required to add overflow hidden to menuOpen and overflow auto/scroll to menuClose.
The close button is probably a whole different issue, post a link to the code or the website so we can look into that properly...

Prevent all elements from scrolling except a popup and its contents

I am trying to get the following behavior to occur: When the popup element is shown, I want to prevent any and all elements from scrolling unless they are the popup and the elements within it. The behavior currently is that when scrolling within the popup element, you will reach the bottom or the top and the rest of the document continues to scroll.
About the code:
The popup itself is a fixed div that appears on the page (on click) when an anchor link is clicked, so the 'prevent scroll' action should occur when the anchor is clicked.
I have put random elements to represent that the content outside the popup is out of your control to style it; therefore it should not matter what this content is other than it being straight forward HTML elements.
The below jsFiddle contains what I have accomplished so far. My problem is certainly in 'how' to grab these elements that I need scroll prevention to occur upon.
Here is is: jsFiddle.
Your help is greatly appreciated!
You can change the overflow of the body and do something like this:
// shows pop up
$("#showPopup").click(function () {
$('body').css({
overflow: 'hidden'
});
$(".popup").fadeToggle(500);
$(".overlay").fadeToggle(500);
// selects anything but the popUp and its children and
$('body > *:not(.popup)').css({
"overflow-y": "hidden"
});
});
// closes pop up
$(".closePopup").click(function () {
$('body').css({
overflow: 'auto'
});
$(".overlay").fadeToggle(500);
$(".popup").fadeToggle(500);
$('body > *:not(.popup)').css({
"overflow-y": "scroll"
});
});
Setting the overflow to hidden will hide the scroll bar when the pop up is shown. Then, when you close it you set the overflow to auto and then you can scroll the page.

How can I set focus to a div with overflow:scroll

When I go to the Gallery page of this website: http://roxannelin.azurewebsites.net I am unable to scroll down until after I click on the page. I would like to be able to scroll down using the mouse wheel as soon as I land on this page.
I have tried setting the focus by placing a tabindex on the div and using jquery .focus() however this moves me to the 3rd tab (showreel) and messes up the layout.
How can I bind the scroll event to this particular div without the user having to do anything?
Try to use click trigger on your div or on any element inside your div, after DOM load:
$(function() {
$("#divId").trigger("click");
});

Assessing the screen position of an anchor?

Sorry, I'm new to javascript, and I'm stumped with this problem.
I have a div in fixed position at the top of my page.
In it are links that when you click, the page scrolls to an anchor. (I used jquery for this.)
I also used javascript to make the "back to top" button appear whenever someone click any of these links, and disappear when they click the "back to top" button itself.
...But it occurs to me that sometimes people will just use the scroll bar instead of the buttons.
Is there a way to make the "back to top" button appear when users scroll down using the scroll bar, and disappear when they scroll back to the top?
In other words, is there an attribute that I can use to assess what anchor is currently at the top of the page? (If so, I can probably figure out the solution from there...)
...Or maybe there is some way to know when users have scrolled back to the top so I can use javascript to get rid of the "back to top" button?
Any help appreciated! Thanks!!
You can get the scroll position with
var scrollTop = $(window).scrollTop();
http://docs.jquery.com/CSS/scrollTop
There are some more hints here: How do I determine height and scrolling position of window in jQuery?
You can use the scrollTop() function in jQuery to determine scrolling distance.
F.ex:
$(window).scroll(function() {
$('#backtotop').toggle( $(this).scrollTop() );
});
This will hide the element with backtotop as ID when the scrolled distance is 0.
If you like a non-jQuery solution, I’m pretty sure you can use the window.scrollY property:
window.onscroll = function() {
if (!window.scrollY) {
// hide it
} else {
// show it
}
};

How to remove the scrollbar without scrolling the content?

I have a website that uses dialogs. When I open that dialogs the body scrollbar is hidden and the scrollbar of the div that contains the dialog shows its scrollbar.
But, when I hide the body scrollbar, the content moves to the begining. How do I keep the position of the content when the dialog is opened?
For more information about this question, look the photos on Facebook. When you click a photo, I like to do that.
Can you give us the code you are using or a link to the site you are talking about? How are you hiding the scroll bar?
If it is by changing the overflow style property to hidden then am I correct in guessing that this only occurs the first time you show the dialog and subsequent appearances of the dialog do not move the content back to the top? If so I am not sure of the best way to prevent this but a quick hack would be to get your javascript to assign the overflow style property of the 'body's container div to auto upon loading.
Add the following to the top of your javascript:
window.onload = function ()
{
document.getElementById('container').style.overflow = 'auto';
}
where container is the id of the div containing your 'body' code.
try to use JavaScript to move the scroll to position:
document.getElementById('container').scrollTop = 50;
above will move scroll bar 50pix to the top, and you can get the max scroll height by:
document.getElementById('container').scrollHeight
Wait, I can't understand your question to well. If you wish to hide the scrollbars, use CSS to hide them.
<style type="text/css">
selector {
overflow: hidden;
}
</style>

Categories