We Keep Coding

Lock parent scroll, only allow div to scroll

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")
});

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");
});

Show the bottom of a scrollable element, instead of default top

How can you make an element with a scrollbar start off at the bottom of the scroll?
I have a div that has overflow: scroll. When the element is loaded, by default, we see the top of the element and you have to scroll down. I want the view to start at the bottom of the div instead.
JS fiddle example. Goal is to load the bottom element by default:
http://jsfiddle.net/2WpQf/

If you can use javascript, then you may do this (demo: http://jsfiddle.net/2WpQf/1/):
var div = document.getElementById("div");
div.scrollTop = div.scrollHeight;

There's a Jquery Plugin called ScrollTo, which can scroll for you progamatically.
ScrollTo()

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>

Turn off auto centering with JQuery scrollable

With the JQuery scrollable widget. If you click the top, it scrolls to the middle. Is there any way to leave the "clicked" elements within the widget where they are when clicked?
[Position1]
[Position2]
[Position3]
[Position4]
[Position5]
For example, if I click Position5, I want it to stay in its place, NOT scroll itself into Position 3.
Any ideas?

You can pass parameter clickable:false to the scrollable initializer:
$("#scroller").scrollable({clickable:false});