We Keep Coding

How to link page scroll to a div element scroll? Or how to scroll div element using page scroll?

So I have an issue with scrolling the page and some div with content inside it.
There is a .container at the bottom of the page and footer goes after it.
When an user gets to the bottom of the page there should be possibility to continue scrolling the page but exactly the .scrollable container should be scrolled.
By default we can scroll .scrollable div's content if mouse cursor is over it. But I need to somehow link common page scroll to this .scrollable div's scroll.
How does this problem can be solved?
Here the JSFiddle link to make the issue more clear

$(window).on('mousewheel', function(e) {
//scrolling bottom
if(e.originalEvent.wheelDelta /120 <= 0) {
//checks if we reached bottom
if($(this).scrollTop() + $(this).height() == $(document).height()) {
$('.scrollable').scrollTop($('.scrollable').scrollTop() + 10);
}
}
});
EDIT: After lots of digging I've managed to build a script for exactly what you need
NOTE: The event is currently bound on mousewheel but there are more types of scrolling such as: dragging, clicking, arrow keys and I'm not aware of function to cover them all and do the thing you want in the same time.
I forked your Fiddle

Detecting jQuery scroll event from inside mousewheel event

$(".elem").on("wheel mousewheel", function(){
// if( $(this).scrollHappens ){
// do something
// } else {
// do something else
// }
//
// how to do this?
});
I'm making a fullscreen vertical content slider, which slides on mousewheel event. now, each slide might have scrollable content. in that case i don't want the silder to slide unless user has reached the bottom or top of the scrollable content (when scroll won't fire).
Or is there are any better way to do this?

Use event.target to detect if you're inside the scrolling panel, if true, then use .scrollTop() with the heights of the scrolling panels, along with the direction of scroll to detect if you're at the bottom or the top.
Here's a JSFiddle to demonstrate: https://jsfiddle.net/g6e4fj97/2/

Hide only one element in fixed div when scrolling down

I have this big photo which takes 100%x100% of screen size and above it there is fixed slider.
I want to fadeout (hide) this green logo when you scroll down from this big header photo leaving navigation bar without it.
How can I do that?
http://i.stack.imgur.com/BiUfE.jpg here is photo

If you want the logo to scroll with the page, just put it outside of the menu bar in your HTML and use position absolute (JS Fiddle).
If you want it to fade out once it leaves the slider, you can use jQuery, here is an example:
//Some variables, to avoid calculating these values at every scroll
var logo = $('#logo');
var sliderBottom = $('#slider').offset().top + $('#slider').height() - logo.height();
//On every scroll
$(window).scroll(function(){
// if we're past the slider and the logo is still visible
if($(window).scrollTop()>sliderBottom && logo.is(':visible')){
logo.stop().fadeOut(300);
}
// if not
else if($(window).scrollTop()<sliderBottom && logo.is(':hidden')){
logo.stop().fadeIn(300);
}
});
JS Fiddle Demo

How to disable scroll bar nicely?

I created this javascript function which disables the scrolling of the page content when the side menu is shown: (like a fb on mobile app)
function disableScroll(){
var top = $(window).scrollTop();
var left = $(window).scrollLeft();
$('body').css('overflow', 'hidden');
$(window).scroll(function(){
$(this).scrollTop(top).scrollLeft(left);
});
}
However, whenever I try to scroll the side menu, the page content shows the scroll bar moving up and going back to its original position. How do I prevent that from showing cos it looks really ugly.
I tried fixed the scroll position using CSS but it will automatically bring my page to the top which is not what i want. i want it to stay at the position where the user last clicked the button for the side menu to appear.

You should also set overflow: hidden to the body element.. Then the scroll bar won't be shown at all. Return it back to the original overflow afterwards.

JQUERY
$('body').delegate('#element', 'click', function() {
$("body").css('overflow', 'hidden');
});
This could maybe fix your problem?

Switch tabs based on mouse scroll

I would like to have a widget on a webpage containing a number of tabs. When the user scrolls the page and the widget comes in to view and he keeps scrolling down, the tabs should be activated one by one (without the page scrolling further down). Once the last tab is showing, the page should resume scrolling as usual. Is this doable using JS/jQuery?
UPDATE:
Since this seems too broad a question:
The problem is, I don't know how to use the scroll offset and prevent the page from scrolling down until I decide it can resume its normal behavior
UPDATE 2
I created This fiddle,
$(document).ready(function(){
$('#tabbed').mouseover(function(){
$(this).focus();
}).scroll(function(){
console.log("scrolling tabs");
});
$(window).scroll(function(evt){
var scrollPos = $(this).scrollTop()
console.log(scrollPos);
// BULLETPROOF WAY TO DETECT IF THE MOUSE IS OVER THE
// SCROLLABLE DIV AND GIVE IT FOCUS HERE?
});
});
it contains a long page and a scrollable div among its contents. The only problem is that the div starts catching scroll events only if I move my mouse. If I could find a bulletproof way to activate the scrolling div whenever the mouse is over it I'm there. Any ideas?

You can't prevent scrolling with javascript. Using iframes and divs with scroll will only work if the mouse is over them.
You can cancel the mouse wheel and keys events related to the scrolling, however the user will be able to scroll using the scrollbar (more here).
Another approach is leaving an empty area and fixing your widget inside this area, like in this working example
$(window).bind('scroll', function()
{
var scroll = $(window).scrollTop(),
innerHeight = window.innerHeight || $(window).height(),
fooScroll = $('#fooScroll'),
emptyArea = $('#emptyArea'),
offset = emptyArea.offset(),
fixedClass = 'fixed';
if(scroll > offset.top)
{
if(scroll < offset.top + emptyArea.height() - fooScroll.height())
{
fooScroll.addClass(fixedClass);
fooScroll.css("top", 0);
}
else
{
fooScroll.removeClass(fixedClass);
fooScroll.css("top", emptyArea.height() - fooScroll.height());
}
}
else
{
fooScroll.removeClass(fixedClass);
fooScroll.css("top", 0);
}
});
Then you can change the tabs while the page is scrolling.

You should be able to do this. You can use the jQuery scroll event to run your own code whenever the user scrolls up or down. Also, so long as you call e.preventDefault() whenever the scroll event is fired, you can prevent the whole window from scrolling up or down.