The best way to understand this is to look at this fiddle.
Notice how mouse wheel over the fixed content in the red box does nothing. I would like the scrollable div to scroll.
In case the fiddle dies - basically I have a scrollable div with a fixed element over it. Typically when you mouse wheel over a scrollable div it will of course scroll. But if you are over the fixed element instead then no scroll happens. Depending on your site layout this could be counter intuitive to a user.
jQuery solutions are okay.
A much, MUCH simpler, but much less widely supported, answer is the following:
#fixed{ pointer-events:none; }
jsFiddle
Doesn't work in IE at all though unfortunately! But you could use modernizr or somesuch to detect whether it was supported and use the jQuery as a stop-gap where it isn't.
Courtesy of Mr. Dominic Stubbs
I had this problem and this works for me (using jquery):
$(document).ready( function (){
$('#fixed').on('mousewheel',function(event) {
var scroll = $('#container').scrollTop();
$('#container').scrollTop(scroll - event.originalEvent.wheelDeltaY);
return true;
});
});
Works on Safari and Chrome: http://jsfiddle.net/5bwWe/36/
I think this does what you're asking for!
$('#fixed').bind('mousewheel', function(e){
var scrollTo= (e.wheelDelta*-1) + $('#container').scrollTop();
$("#container").scrollTop(scrollTo);
});
EDIT: Updated the jsFiddle link to one that actually works
DOUBLE EDIT: Best to dispense with the .animate() on further testing...
jsFiddle Example
TRIPLE EDIT:
Much less pretty (and will probably be horribly slow with a lot of elements on the page), but this works and I owe a lot to this stackoverflow answer.
$('#fixed').bind('mousewheel', function(e) {
var potentialScrollElements = findIntersectors($('#fixed'), $('*:not(#fixed,body,html)'));
$.each(potentialScrollElements, function(index, Element) {
var hasVerticalScrollbar = $(Element)[0].scrollHeight > $(Element)[0].clientHeight;
if (hasVerticalScrollbar) {
var scrollTo = (e.wheelDelta * -1) + $(Element).scrollTop();
$(Element).scrollTop(scrollTo);
}
});
});
function findIntersectors(targetSelector, intersectorsSelector) {
var intersectors = [];
var $target = $(targetSelector);
var tAxis = $target.offset();
var t_x = [tAxis.left, tAxis.left + $target.outerWidth()];
var t_y = [tAxis.top, tAxis.top + $target.outerHeight()];
$(intersectorsSelector).each(function() {
var $this = $(this);
var thisPos = $this.offset();
var i_x = [thisPos.left, thisPos.left + $this.outerWidth()]
var i_y = [thisPos.top, thisPos.top + $this.outerHeight()];
if (t_x[0] < i_x[1] && t_x[1] > i_x[0] && t_y[0] < i_y[1] && t_y[1] > i_y[0]) {
intersectors.push($this);
}
});
return intersectors;
}
UPDATE (August 2016): It seems the browser implementations have changed and it's no longer possible to re-dispatch a WheelEvent on a different target. See the discussion here.
For an alternative solution that should work across platforms, try this:
var target = $('#container').get(0);
$('#fixed').on('wheel', function (e) {
var o = e.originalEvent;
target.scrollTop += o.deltaY;
target.scrollLeft += o.deltaX;
});
Working example: https://gist.run/?id=6a8830cb3b0564e7b16a4f31a9405386
Original answer below:
Actually, the best way to do it is to copy the original event. I've tried #Tuokakouan's code but scrolling behaves strangely (too fast) when we use a multitouch touchpad that has inertia.
Here's my code:
var target = $('#container').get(0);
$('#fixed').on('wheel', function(e){
var newEvent = new WheelEvent(e.originalEvent.type, e.originalEvent);
target.dispatchEvent(newEvent);
});
You can try it here: http://jsfiddle.net/NIXin/t2expL6u/1/
What I'm trying to do now is also to pass the touch events, without much success. Since mobile phones and touch screens are now more popular, some people might want to scroll using their fingers instead - neither of the answers offered solves that.
Well,all solutions with js are kind of delayed when scrolling on it. if the fixed element you use is just for display, then I have a good css tricks to achieve that.
make the fixed element z-index:-1 and the container element background-color:transparent
here is the jsfiddle you can see: https://jsfiddle.net/LeeConan/4xz0vcgf/1/
Related
I am having an issue getting the height of an object. Please excuse the mass (and mess!) of code it was easier to show the issue this way.
To recreate problem - hit the blue 'play' button - then click the green 'back to where we were' button.
You will see that it doesn't work on the return and I am completely stuck.
To make matters worse I am calculating the height on an element that is visibility: hidden - so I can't even tell if it is collapsing in some weird way!
The problem lies in the atrocity that is my 'getheight()' function but I can't see where it is causing the issue. (code here for reference - the fiddle tells the full story.)
please help me out guys - and do'nt criticise my 'code as I think mess' too much :-D
p.s. - as this is turning into a rather complex and messy lot of code and alternative ways to achieve what I am trying to achieve (morph one container to another without having to absolutely position either of the items) would be appreciated - just some ideas dont want code writing for me!
Fiddle illustrating problem
function getHeight(elem){
var parent = $(elem).parent();
if(parent.css('display') == "none"){
console.log('parent');
parent.css('display', 'hidden');
parent.css('position', 'absolute');
parent.css('display', 'block');
theHeight = $( elem ).height();
parent.css('display', 'none');
return theHeight;
}else{
console.log('element');
var beforePos = $(elem).css("position");
var beforeDisplay = $(elem).css("display");
var beforeVisibility = $(elem).css("visibility");
$(elem).css('visibility', 'hidden');
$(elem).css('position', 'absolute');
$(elem).css("cssText", "display: block !important");
console.log("DISPLAY" + $(elem).css('display'));
theHeight = $(elem).height();
console.log(theHeight);
console.log(beforeVisibility);
console.log(beforeDisplay);
console.log(beforePos);
console.log(elem);
$(elem).css("cssText", "");
$(elem).css('visibility', 'visible');
$(elem).css('display', beforeDisplay);
$(elem).css('position', beforePos);
return theHeight;
}
}
as for getting height of hidden element, jQuery page says this:
The value reported by .height() is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using .height(). jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.
link to the jQuery height function
Thanks to Mark for pointing me to the documentation - the fix was actually quite simple once I knew what inconsistency jQuery has -
changed:-
theHeight = $(elem).height();
to
theHeight = $(elem).css("height");
and it functions as it should!
now working fiddle
jsFiddle
Trying to vertically scroll the div child in Google Chrome, arrived at the end, if you try to continue the scroll is also scrolled the div parent, which does not happen with Mozilla. How to fix it?
With jquery you can disable the overflow when mouse is over the child div.
This way works on Firefox 24 for Mint, and Chromium 28...
http://jsfiddle.net/JcUxs/2/
$('.child').on('mouseover',function(){
$(this).parent().addClass('fixoverflow');
});
$('.child').on('mouseleave',function(){
$(this).parent().removeClass('fixoverflow');
});
css:
.fixoverflow{
overflow: hidden
}
I think that this is the best solution I can achieve (It took 1 hour to understand that the scroll event and the wheel is getting trigger both):
I used flag variable to keep the scroller position.
I used jquery and I noticed just now from the comments that you asked for pure javascript.
Anyway jquery bases on native javascript so I'll edit my answer later and translate it to pure code.
Just confirm that it's good enough for you and i'll translate it.
JavscriptCode:
var isCanceled = false;
var currentPos = $(".parent").scrollTop();
var stopWheelTimer = undefined;
$(".child").on('mousewheel', function (event) {
clearTimeout(stopWheelTimer);
event.stopPropagation();
isCanceled = true;
currentPos = $(".parent").scrollTop();
stopWheelTimer = setTimeout(function(){
isCanceled = false;
}, 250);
});
$(".parent").on('mousewheel', function (elem) {
if(isCanceled)
{
$(elem.target).scrollTop(currentPos);
}
});
$(".parent").on('scroll', function (elem) {
if(isCanceled)
{
$(elem.target).scrollTop(currentPos);
}
});
Working Example:
jsFiddle
I have a flash object inside a div, that will zoom it's content when I scroll over it. the problem is that my page also scrolls and I don't know how to fix this problem. I need the page to stand still when I scroll over the flash.
I tried adding this
flashContainer.bind('mousewheel DOMMouseScroll', function(e) {
var scrollTo = null;
if (e.type === 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
} else if (e.type === 'DOMMouseScroll') {
scrollTo = 40 * e.originalEvent.detail;
}
if (scrollTo) {
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});
but because of preventDefault, the flash object won't zoom anymore.
Do you have any suggestions?
may be this could work for you:
$("element").hover(function(){
var scrollT = $(document).scrollTop();
$(document).on("scroll", function(e){
$(document).scrollTop(scrollT);
});
}, function(){
$(document).off("scroll");
});
http://jsfiddle.net/ZFsDY/3/
I stumbled on this issue a few months ago (the old method we used to manage scrolling didn't work on the most recent browsers).
I'm not allowed to publish the code for it, but here a few note on how we did it.
Like in reyaner's answer, we use event listening and preventDefault() to disable the browser auto scrolling, and get the scroll value (but without scrollTop()).
Once we have the value, we send it to the Flash via ExternalInterface.
For it to be possible, the flash object must beforehand add a Callback, a Flash method that can be called by Javascript.
We added a couple of additional interaction between Flash and JS so that the scroll is locked only when the Flash has the focus.
A warning : all browser don't have the same scale for the wheelDelta, and you may find that the zoom speed can vary. To fix this we decided to always use a fixed step each time the event is dispatched, instead that using the delta as-is.
another try:
$("element").bind( 'mousewheel DOMMouseScroll', function ( e ) {
var d = e.wheelDelta || -e.detail;
var s;
if(d < 0) s = 1;
else s = -1;
this.scrollTop += s * 30;
e.preventDefault();
});
http://jsfiddle.net/ZFsDY/5/
I'm trying to use the browser scroll event to place a block of html based on the amount a user has scrolled. The code works but it is causing a huge performance issue which basically forces my browser to freeze.
Any insight as to why and what I could do to resolve this would be greatly appreciated.
<script type="text/javascript">
$('#content').scroll(function () {
var scroll = $('#content').scrollTop();
var $controls = $(".controls").clone();
if (scroll > 200) {
$(".controls").remove();
$('#header').append($controls);
}
else {
$(".controls").remove();
$('.banner').append($controls);
}
});
</script>
First, discovering elements in the DOM is an expensive activity, so cache your jQuery objects.
Second, .append() moves elements around so .clone() and remove() should be unnecessary.
This gives :
var $$ = {//cache of jQuery objects
content: $('#content'),
controls: $(".controls"),
header: $("#header"),
banner: $('.banner')
};
$('#content').scroll(function() {
$controls.appendTo(($$.content.scrollTop() > 200) ? $$.header : $$.banner);
});
Now, you can work on reducing the frequency at which the handler is called, which can be achieved as follows :
var $$ = {//cache of jQuery objects
content: $('#content'),
controls: $(".controls"),
header: $("#header"),
banner: $('.banner')
};
var scrollHandling = {
allow: true,
reallow: function() {
scrollHandling.allow = true;
},
delay: 50 //(milliseconds) adjust to the highest acceptable value
};
$('#content').scroll(function() {
if(scrollHandling.allow) {
$controls.appendTo(($$.content.scrollTop() > 200) ? $$.header : $$.banner);
scrollHandling.allow = false;
setTimeout(scrollHandling.reallow, scrollHandling.delay);
}
});
The scroll function is called for every movement of the scrollbar. That can potentially be a lot of times, so you need to be careful how much code you are running and certainly how much manipulation of the DOM you are doing.
In this case, you'll be repeating a lot of the same actions (clone, append, remove) as the scrolling is occurring, but it appears that you only want to flip between two states as you cross back and forth over that 200 scroll value. You could potentially solve most of the performance issues with something like this:
<script type="text/javascript">
var thresholdCrossed = false;
$('#content').scroll(function () {
var scroll = $('#content').scrollTop();
var threshold = 200;
if (scroll > threshold && !thresholdCrossed) {
var controls = $(".controls").clone();
$(".controls").remove();
$('#header').append(controls);
} else if (scroll <= threshold && thresholdCrossed) {
var controls = $(".controls").clone();
$(".controls").remove();
$('.banner').append(controls);
}
thresholdCrossed = scroll > threshold;
});
</script>
You can do additional work that some of the other answers describe to help reduce wasted resources, but this should give you a general idea of how to hopefully help the main performance concern of constantly modifying the DOM as you scroll. I would probably suggest some combination of this along with the answer provided by #Kolink so that you are truly limiting the DOM manipulation to the least amount necessary.
You are cloning all .controls elements every tick of scrolling, even when it is not needed.
I would suggest cloning the controls on ready and setting it to display:none. Then, just toggle the display based on the scroll position.
On re-reading your question, it looks like you're just moving the controls element from the header to the banner? In that case, you don't even need a clone. However I strongly suggest adding id="controls" to the controls element, and id="banner" - use IDs instead of classes in general if there is only one.
document.getElementById('content').onscroll = function() {
document.getElementById(this.scrollTop > 200 ? "banner" : "header")
.appendChild(document.getElementById('controls'));
};
Every time the scroll bar moves jQuery has to go into the DOM to get the variables you references. To start cache the variables so jQuery doesnt have to do twice the work.
var content = $('#content');
content.scroll(function(){
});
Currently I'm working on a website that is designed to run both on mobile devices and on regular computers. The problem that I'm facing is caused by the fact that I need to have a header and a footer with fixed positions.
The first thing that I tried, which seemed the most natural to me, was using position:fixed. It worked very well on my PC but it didn't work on my iphone (with ios4). So I googled it up a bit and found iScroll. iScroll is a JavaScript standalone script meant to solve this exact problem. The problem is that this solution breaks the feature on a non-mobile platform. I also looked at YUI ScrollView but again it was broken on a non-mobile platform.
Currently I solved it by using iScroll only when I detect a mobile browser. But I'm looking for a cleaner and better solution.
Note: iScroll4 doesn't support ie, which I also want to support.
Unfortunately there is no clean solution - you can try detecting "touch events" since those pretty much let you know when the user is going to need iScroll, and fire it up.
An easy way to detect touch events is the following,
var $q = something...;
try {
document.createEvent("TouchEvent");
$q.onmousedown = 'ontouchstart',
$q.onmouseup = 'ontouchend',
$q.onmousemove = 'ontouchmove';
$q.touches = true; //used in other modules as well
//position based on first-finger position
$q.getPageX = function(e){
return e.touches[0].pageX;
};
$q.getPageY = function(e){
return e.touches[0].pageY;
};
} catch (e) {
//KEY BASED DEVICE
$q.onmousedown = 'onmousedown',
$q.onmouseup = 'onmouseup',
$q.onmousemove = 'onmousemove';
$q.touches = false;
//grabbing the position based on Mouse position
$q.getPageX = function(e){
return e.clientX;
};
$q.getPageY = function(e){
return e.clientY;
};
}