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?
Related
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
I have long web page that scrolls vertically with several videos. Using Media Element Player, the videos play, but if you enter full screen mode and then exit full screen mode, the page returns to the very top, regardless of where the video is on the page. I want it to return to the same place. Here is the code I'm using:
var topPosition;
MediaElementPlayer.prototype.enterFullScreen_org =
MediaElementPlayer.prototype.enterFullScreen;
MediaElementPlayer.prototype.enterFullScreen = function() {
console.log('enter full screen');
this.enterFullScreen_org();
topPosition = window.pageYOffset;
console.log(topPosition);
}
MediaElementPlayer.prototype.exitFullScreen_org =
MediaElementPlayer.prototype.exitFullScreen;
MediaElementPlayer.prototype.exitFullScreen = function() {
console.log('exit full screen')
this.exitFullScreen_org();
ResetFullScreen();
}
function ResetFullScreen() {
console.log('top pos:', topPosition);
setTimeout(function () { window.scrollTo(0, topPosition) }, 500);
}
The console.log shows the correct value for "topPosition" but the window.scrollTo method doesn't appear to work.
Looking through your code, it appears that it should work. I do, however, have one more method to setting the scroll that may work. This will be useful if the element you're trying to scroll is not at the top level.
When storing the scroll position:
topPosition = document.body.scrollTop;
When setting the scroll position:
document.body.scrollTop = topPosition;
If what you're trying to scroll is an element within the body, and not the body itself, just replace document.body with the element you need to scroll.
Also, I found a little thing in your code:
MediaElementPlayer.prototype.enterFullScreen;'
There's a random quote at the end of that line.
EDIT:
If that method does not work, I have one more idea for you. When they click on the video they view, store the element that they clicked on in a variable. After leaving fullscreen, scroll the element into view. That way, you will be, more or less, where the screen was when it entered fullscreen.
Each video has an onclick containing the following; this stores the element they clicked on.
lastVideoClicked = event.target;
When leaving fullscreen, this code will attempt to scroll that element back into view.
lastVideoClicked.scrollIntoView();
You can try it out on the Stack Overflow site right here - scroll to the bottom of the page, open your javascript console, and enter the code document.getElementById('hlogo').scrollIntoView(). This scrolls the Stack Overflow logo into view.
I have an off canvas menu that slides in from the right and sits on top of the page. To prevent a scroll bar I am setting the content section's position to fixed while the menu is open. Problem is, when I close the menu the scroll position on the page is lost, the user is returned to the top of the page.
I am trying to store the scroll position of the page and then set the scroll when the window is closed, but its not working. If I debug the code I can see the scrollTop() functioning as expected, but then it goes into the jQuery.js script and after several function calls it resets the scroll to the top of the page.
What am I doing wrong?
var scrollPos;
function openMenu() {
$('body').addClass('open');
}
function closeMenu(compat) {
$('body').removeClass('open');
}
/*** Event Handlers ***/
$('#js-menu-toggle').on('click', function() {
scrollPos = $(window).scrollTop();
openMenu();
});
$('#js-menu-close').on('click', function() {
closeMenu();
$(window).scrollTop(scrollPos);
});
My apologies for not providing enough of an MCVE.
It turns out the problem was the events were bound to an <a> link with a "#" href, so adding in
return false;
as the last line of the .on events solved my problem.
I've recently taken over work on a friend's website, here. I want to get the small logo above the description box to only show up once the user has scrolled past (and subsequently hidden) the large header at top, and disappear again if the user scrolls back up past it. I've tried the methods recommended in these other posts here and here, which seem like the same basic idea but I can't get any of them to work.
I'm new to anything and everything scripting (which I'm entirely sure is the biggest problem here, I know.) So any help is appreciated as what I'm apparently doing wrong.
Start by giving the <div class="fixeddiv"> a style="display: none". Then add the following (since you're already using jQuery):
$(document).ready(function () {
var contentOffset = getOffset();
function getOffset() {
var allOffsets = $("div#content").offset();
return allOffsets.top;
}
$(window).resize(function () {
contentOffset = getOffset();
});
$(window).scroll(function () {
var windowTop = $(window).scrollTop();
if (windowTop > contentOffset) {
$("div.fixeddiv").show();
} else {
$("div.fixeddiv").hide();
}
});
});
Here's what this code does. When the document is done loading, it gets the number of pixels that the "content" div is from the top of the document (offset). It does this again any time the window is resized. Then, when someone scrolls up or down, it gets the number of pixels that are already hidden above the scroll (scrollTop). If the number of hidden pixels is greater than the offset of the #content div from the top of the window, that means we've scrolled past the top of the content div and should show the icon. Otherwise, we should hide the icon.
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.