$(".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/
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'm trying to replicate this behavior from this website: https://www.wealthsimple.com/en-ca/
Has you can see, I want the same paragraph navigation on a scroll when the paragraphs are fade-in/fade-out on the scroll.
The container of those paragraphs seem to be pinned, at every each xxx pixels of scrolling, they switch class for being shown or not.
Any idea which direction I need to take?
I'm currently using scrollmagic to pin my container but I have no idea how to trigger each 500px of user scrolling.
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
if(scroll>500)
alert("do somethg");
if(scroll%500==0)
alert("do somethg every 500 scroll")
});
I have two divs, standing next to each other. In addition to click event I added a swiperight and swipeleft to do something. But when I add these swipe events, scroll doesn't work anymore on iPad. On PCs there's no problem!
Is there any other way to make them compatible with each other on iPad (touch screen devices)?
Merci!
Found a solution:
http://stephband.info/jquery.event.swipe/
Swipe events are a thin wrapper built on top of move events (stephband.info/jquery.event.move). Move events, by default, override native scrolling, as they assume that you want to move something rather than scroll the window. To re-enable scrolling, call e.preventDefault() inside a movestart handler.
In the example above, we want to be able to swipeleft and swiperight, but scroll up and down. Inside a movestart handler, the direction of the finger is moving is calculated and the event is prevented if it is found to be moving up or down::
jQuery('.mydiv')
.on('movestart', function(e) {
// If the movestart is heading off in an upwards or downwards
// direction, prevent it so that the browser scrolls normally.
if ((e.distX > e.distY && e.distX < -e.distY) ||
(e.distX < e.distY && e.distX > -e.distY)) {
e.preventDefault();
}
});
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.
I'm using SwipeTouch plugin to hide and show #child element by swiping.
I have #parent element that holds the #child element.
This #child will not always have enough content to create scrollbar, but the problem will arise when there is.The #parent constrains #child element, forcing a scrollbar if #child element is taller than the #parent
<div id="parent">
<div id="child">
<!-- Lots of content -->
</div>
</div>
I'd like to allow swiping at any direction to show and hide the #child...
Swiping to show #child element will be referred to as swipeIN.
Swiping to hide #child element will be referred to as swipeOUT.
...problem with that is, if and when the scrollbars exist and the #child is visible, I can't scroll vertically because that would register as swiping attempt and trigger swipeOUT.
So, I had a plan:
No scrollbar: swipe at all directions to trigger swipeIN and swipeOUT.
Scrollbars: Swipe all directions to trigger swipeIN. 'Swipe' up or down to scroll, swipe left or right to trigger swipeOUT.
This was a good plan, except that it doesn't work. I guess if I was able to disable swipe top and swipe down temporarily, it would work...
Link to my attempt ( the problem is only apparent on a touch device ).
Link that is better for testing in a touch device
Any ideas on how I could get this to work?
Setting the option 'allowPageScroll' from 'auto' (default) to 'vertical' (in some cases if you want) should do the trick
I started thinking about the long term plan of my own project and some time ago finally got myself to contact the developer of the plugin via github( Link the github issue page ).
He updated the plugin so that you can now change all plugin options on the fly. That also enables the behavior I was looking for. The documentation for this can be found here ( The method is called: option ).
http://jsfiddle.net/lollero/yATmM/
http://jsfiddle.net/lollero/yATmM/show
My Code:
$(function() {
$(".parent").each(function() {
var obj = $(this),
objD = obj.data(),
objChild = obj.find('.child'),
scrollbars = obj.height() < objChild.height();
obj
.data({ "swipe": "in" })
.swipe({
fallbackToMouseEvents: true,
swipe:function( event, direction ) {
// swipeIN = swipe that shows #child
// ( Swiping is allowed for all directions ).
if ( objD.swipe === 'in' ) {
obj.data({ "swipe": "out" });
objChild.show();
// If scrollbar exists, set allowPageScroll data
// to 'vertical', so that next time when you swipe
// up or down, you can scroll vertically.
scrollbars && obj.swipe('option', 'allowPageScroll', 'vertical');
}
// swipeOUT = swipe that hides#child
// If scrollbars don't exist, swipe at any direction to hide.
// If scrollbars exits, swipe left or right to hide ( Up and Down is reserved for scrolling ).
else if (
objD.swipe === 'out' && scrollbars && ( direction === 'left' || direction === 'right' ) ||
objD.swipe === 'out' && !scrollbars
) {
obj.data({ "swipe": "in" });
objChild.hide();
// If scrollbar exists, set allowPageScroll data to
// false, so that next time when you swipe up or down,
// you actually trigger a swipe.
scrollbars && obj.swipe('option', 'allowPageScroll', false );
}
}
});
});
});