When i reach the end of the scroll on the top div, I don't want to initiate any other scroll. I just want it to stop scrolling. Quite a reasonable request I'd say.
Here is a demo of the issue on JS fiddle
Is there a way one can disable this cross browser?
As a user, you are explicitly moving you mouse to the div to interact with it. Who is the browser to assume that i now want to scroll the thing beneath it? It's surely a bug.
You need to disable overflow on the whole body when your div is focused, with something like
$('#scrollme').hover(function() {
$('body').css('overflow', 'hidden');
}, function() {
$('body').css('overflow', 'auto');
});
Modified fiddle: http://jsfiddle.net/vQSmG/
As you can see with the top I added, it works even if your #scrollme element is not at the top of the page; you don't lose the global scroll position information.
I tested in FF 3.6, IE 9 and the latest Chrome, but I don't have older IE on hands right now to make sure it works there too.
Related
$(document).ready(function(){
$(document).mouseleave(function(){
$('#desktop-subscribe-modal').modal('show');
});
});
I am trying to trigger a function when the mouse leaves the document window. The above code works fine in Firefox but in Chrome it is triggered when hovering over the page scrollbar.
Is there a way to exclude the scrollbar from the mouseleave function?
Ok, I got around this issue by checking the mouse position when mouseleave is triggered. I only really need it to trigger when the mouse hovers above the viewport so I just check if the vertical position is < 0.
$(document).ready(function(){
$(document).mouseleave(function(e){
//Check mouse is above the viewport
if(e.clientY < 0){
$('#desktop-subscribe-modal').modal('show');
}
});
});
The scrollbar is technically outside the client window, so all browsers should do that. Some don't (so really, FireFox is wrong, not Chrome) :)
However the best solution is to use a replacement scrollbar (Perfect scrollbar is my favourite). These use elements inside the page so will do what you want on all browsers (and look pretty cool too).
I have a sidebar in my app that can be hidden/shown via a toggle button. It simply toggles a class on "body" that adds some margin left to the content area and hides/shows the sidebar. Trouble is that the content area isn't resizing its child content when this is toggled. Once I adjust the size of the browser, the content area adjusts to fit the content, but I need it to do this after the toggle without the need to resize the window. Is there a way to trigger an element size refresh or dom refresh to solve this issue? Using Chrome 19.x.
$('#sidebar-toggle').click(function(event) {
event.preventDefault();
$('body').toggleClass('with-sidebar-left');
});
Edit: Seems like it might be a Webkit issue. Works fine in Firefox.
Edit 2: Set up a simplified build at the following location:
https://dl.dropbox.com/u/189605/misc/build-test/grid.html
You can see the boxes are float: left and when you minimize the sidebar using the little arrow button, it should adjust the right so more boxes will fit. In Webkit, you have to resize the browser for it to realize it's got more space. Works in Firefox.
you could just trigger a resize in your click handler, eg:
$(window).trigger('resize')
The workaround from my answer here works for your situation.
Here's a quick demo: http://jsbin.com/amakex
It works in both Chrome and Safari (unsurprisingly, your original demo also didn't work in Safari).
you said-"but I need it to do this after the toggle without the need to resize the window".you can use jquery callback to do that
I am having trouble with the scroll of divs on pages when viewed in IE, no problem in Chrome or FF
I have a div on a page which has a scroll bar (vertical) and if it has been scrolled down when I use the function appendChild to either the body or any other part of the page the scroll on the other div resets back to the top.
Please can you offer any suggestions why this might happen, perhaps something to do with redraw/reflow but why only IE?
Another thing I have noticed which may be the cause is that it only seems to happen on pages with position fixed on them.
Internet Explorer 9 was finding a dead class reference on an element on my page when rendering. When it did this it was loading each element fresh again in this case without saving how far it was already scrolled down.
How can I keep the browser from scrolling, or how can I make the browser continually scroll to a fixed posistion?
I am working on a library for the Nintendo 3DS browser. I made the page fit perfectly within the browser, but the up arrow makes it scroll because the bottom screen is the only window recognized as the visible area.
I want to make it so the div #bottomScreen is the only thing in the bottom screen, and disabling scrolling is the only thing I can think that would work.
I have figured out how to scroll it to a said position via
document.body.scrollTop = 220;
How can I make it continually go to this position?
Making a repeating timer with setTimeout and putting the above code in it won't work. I believe it is because this only works prior to the page loading.
Any advice on how to enforce it?
It should work even after page load. Here's the code, although i'm not sure what the intent of the code is, might be annoying to the user.
setInterval( function(){ document.body.scrollTop = 200 }, 500 ); // set your time
A more elegant solution would be to disable scrolling when that method is called (to scroll to the position of 220 from top or whatever), and re-enable it whenever the appropriate action has been taken by the user etc... jQuery example:
$('body').css('overflow', 'hidden'); // removes scrollbars entirely
$('body').css('overflow', 'auto'); // re-enable scrolling
Otherwise use setInterval() with a very short interval like 10ms to repeatedly fire your scroll function. If you are going to do this it would be wise to add some logic to see if the window is already scrolled to approximately the right position (allow for +/- 10px or something) so it isn't extremely jarring for the user.
The best way I've seen on some sites (like twitter I think or facebook when an image pops up) which is to set the overflow property to hidden on the body element. This prevents any scrolling so all you need to worry about is the position of content when you do that.
I guess you would need to wrap the content in some sort of container element and when you change the overflow of the body element you also set the y-coordinate of the container to reveal the specific area of the page being looked at.
This is by far the best thing I have seen to achieve that effect because it doesn't require timers etc.
You could add a event listener for the scroll event, and then set the position then.
I've made a page with smooth vertical scrolling, and I was wondering if you can somehow "block" so the user can't use his mouse or touchpad to scroll on the page - when they do that the whole idea kinda stops.
you can see the scrolling on my webpage.
enter link description here
So far I've just hidden the scrollbar so they can't do it.
I guess you can say what I'm asking for is, can you "block" manually scrolling?
Thanks.
they are several solutions, but there's none that I found perfect. The simpliest is:
set the css property "overflow" to hidden (if on your body, you must set height and width to 100% on body and html, plus no margins/padding borders).
also you can add a listenner to scroll events, then prevent them with event.prevendDefault().
But they are always undesirable effects that can "scroll" pages(and blocks) without a mousescroll:
first is selection: your layout break here. To try it, select from the upper and go down, then the page will scroll(with chrome). this is unlikely to happen when there is no text and no drag and drops, but once it happens your users are lost since there is no scrollbars.
second is scrollIntoView(). You can call that via javascript, or the browser will do it automatically sometimes ( href to an anchor, input focus, "scroll memory at reload" ). This is were there is most risks, but there is very few control over these.
finally, one "bad" solution I found is to regularly force scrollTop property of elements to 0. But most probably you won't have to get there and the CSS body { overflow: hidden; height: 100% } will be sufficient.
The way you've done it is fine. I don't think you can cancel a scroll event, like you can with other event (keypress, button clicks etc..)
Setting overflow to hidden would be how I'd do it as well, as that completely stops all scrolling. The event doesn't even take place in the background.
The following code will block scrolling with the mousewheel. While this isn't relevant for me as I can't use the mousewheel to scroll anyway, it may block scrolling with your touchpad.
Just add this to one of your included js files...
window.onmousewheel = document.onmousewheel = function(event){
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
Here's an example...
http://jsfiddle.net/johncmolyneux/aSw2g/