I'm having some trouble with triggering a scroll event by using jquery.mousewheel. I want to "expand" the scroll event for #bio-content-container to trigger when scrolling over #bio-slider-container.
I'm using following code:
var lastScrollTop = 0;
$("#bio-content-container").scroll(function () {
var st = $(this).scrollTop();
if (st > lastScrollTop){
scroll('Down');
} else {
scroll('Up');
}
lastScrollTop = st;
});
jQuery(function($) {
$('#bio-slider-container')
.bind('mousewheel', function(event, delta) {
$("#bio-content-container").trigger('scroll');
return false;
});
});
I don't want to trigger scroll on #bio-slider-container, so that's why I'm using mousewheel. Any help would be much appreciated :)
If I understand correctly, you want to scroll the contents of #bio-content-container when you use the mousewheel over #bio-slider-container. You might want to check out the jquery.scrollTo plugin. This code works for me (without seeing your HTML):
$(document).ready(function () {
$('#bio-slider-container').bind('mousewheel', function (event, delta) {
var content = $("#bio-content-container");
if (delta < 0) {
content.scrollTo("+=10");
} else {
content.scrollTo("-=10");
}
});
});
Related
I have a event bind to mousewheel in which I use the event to make some calculations, I would like to be able to use the same function to perform the same calculations from touch devices.
my code is like:
$('#element').bind("mousewheel DOMMouseScroll", function(event) {
event.preventDefault();
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0)
//do stuff
else {
//do other stuff
}
});
EDIT: As from the comment I understand i was not completely clear, my goal is to obtain a value like "wheelDelta" that make me recognize if the user is scrolling (touchmoving) up or down
This may not be the appropriate solution but you may do something like this.
var lastScroll = 0;
$('#element').on("scroll", function() {
var st = $(this).scrollTop();
if (st > lastScroll){
// downscroll code
//$(this).trigger("mousewheeldown");
} else {
// upscroll code
//$(this).trigger("mousewheelup");
}
lastScroll = st;
$(this).trigger("mousewheel");
});
I hope that helps :)
I'm trying to apply a different style to the header whenever you scroll down from the top. Basically I want it so that if you are scrolled at the top then apply style 1, but if you are not scrolled at the top then apply style 2.
I have tried using a while and for loop to achieve this but both failed. The jQuery example below did work but for some reason not on this example. However I would rather use JavaScript than jQuery since I am learning JavaScript.
Can someone advise me what should I use for this: a while or if statement? And can someone tell me what I have done wrong with my attempts?
Thanks for any help.
// ATTEMPT 1
var headerWrap = document.getElementById('header-wrap');
var h = headerWrap.scrollTop;
function changeHeaderOpacity() {
"use strict"; // wtf is this?
while (h > 0) {
headerWrap.addClass('scroll-opacity-change');
}
headerWrap.removeClass('scroll-opacity-change');
}
// ATTEMPT 2
/*
var headerWrap = $('#header-wrap');
$(window).scroll(function() {
headerWrap.addClass('scroll-opacity-change');
if($(this).scrollTop() <= 0) {
headerWrap.removeClass('scroll-opacity-change');
}
});
*/
/*
// ATTEMPT 3
var headerWrap = document.getElementById('header-wrap');
var h = headerWrap.scrollTop;
function changeHeaderOpacity() {
"use strict"; // wtf is this?
if (h > 0) {
headerWrap.addClass('scroll-opacity-change');
} else {
headerWrap.removeClass('scroll-opacity-change');
}
}
*/
body{
height:1000px;
}
#header-wrap{
height:100px;
width:100%;
background:#0f0;
}
.scroll-opacity-change{
background:#f00;
}
<div id="header-wrap">
</div>
Well first of all, you need to add listener to detect window scroll.
$(document).ready(function() {
$(window).scroll(function() {
//do the header styling using .style
});
});
Now you need to store the scroll log in few variables to figure out you are scrolling down or not, you can the following using this:
var currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if (currentScroll > lastScrollTop){
// You are down scrolling
} else {
// You are up scrolling
}
previousScroll = currentScroll;
Final code:
$(document).ready(function() {
previousScroll=0 //this means we are starting from top
$(window).scroll(function() {
var currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if (currentScroll > previousScroll){
// Change header style cause you are down scrolling
} else {
// Do something else? You are up scrolling anyway...
}
previousScroll = currentScroll;
);
});
I hope this helps, your comments are welcomed.
Use class instead of id;
<div class="header-wrap">
</div>
and
$(window).scroll(function() {
$('.header-wrap').addClass('scroll-opacity-change');
if($(this).scrollTop() <= 0) {
$('.header-wrap').removeClass('scroll-opacity-change');
}
});
I am trying to animate some divs after the user scrolls to a specific position on the page. the problem is that i want it to happen only once. I used Boolean flags but it doesn't seem to like it.
What are u all suggest me to do?
::the code Its not even running
FYI I don't want to use PHP
var once = false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 && once == false) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
once = true;
}
)};
Thanks!
From your question
after the user scrolls to a specific position on the page
Listen to scroll event
$(document).ready(function() {
var once = false;
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760 && once==false){
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);
});
once=true;
}
});
)};
Alternative from comments. Check if element has a class (or attribute) or not. Below code checks if the element has the data-noanimate attribute. If yes it will not animate, if not it will animate and add data-noanimate so that it will animate once.
$(document).ready(function() {
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760){
$('.hash').each(function(i) {
if($(this).attr('data-noanimate') === undefined){
$(this).attr('data-noanimate','true').fadeOut(0).delay(1000*i).fadeIn(1000);
}
});
}
});
)};
var once=false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 &&once==false)
{
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);});
once=true;
}
});
Your brackets on the end of the ready function were flipped.
The other answer is correct, but it can be better like this:
$(function() {
$(window).on('scroll', function(){
if ($(window).scrollTop() > 760) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
// without boolean value,you can off `scroll` event
$(window).off('scroll');
}
})
});
I have a sapui5 table and I am trying to log in the console if the table is being scrolled up or down. I can get it to working if I use a regular div.
Example here.
But I can't seem to get it to work for a sapui5 table. I have tried the following:
var lastScroll = 0;
$("#__xmlview0--players-vsb-sb").scroll(function () {
var st = $(this).scrollTop();
if (st > lastScroll) {
console.log("scrolling down");
} else {
console.log("scrolling up");
}
lastScroll = st;
});
I'm getting the id #__xmlview0--players-vsb-sb when I inspect element on the scrollbar. This seems like the id I should use. Any ideas of how to get this to work?
Here is my JSBin.
If you put the scroll event inside a setTimout, it starts working.
setTimeout(function(){
var lastScroll = 0;
$("#__xmlview0--players-vsb-sb").scroll(function () {
var st = $(this).scrollTop();
if (st > lastScroll) {
console.log("scrolling down");
} else {
console.log("scrolling up");
}
lastScroll = st;
});
}, 700);
This is an indication that the UI library is clearing out events on the elements it uses when it initializes its own events on them. This is probably to remove the risk of memory leaks. I would suggest not using the timeout, and seeing this stack for more info: SAPUI5-Which method to call once a view is displayed everytime?
I am coding a page where the first time the user scrolls, it doesn't actually scroll the page down, instead it adds a class with a transition.
I'd like to detect when the user is scrolling down, because if he scrolls up, I want it to do something else.
All the methods that I've found are based on defining the current body ScrollTop, and then comparing with the body scrollTop after the page scrolls, defining the direction, but since the page doesn't actually scroll, the body scrollTop() doesn't change.
animationIsDone = false;
function preventScroll(e) {
e.preventDefault();
e.stopPropagation();
}
$('body').on('mousewheel', function(e) {
if (animationIsDone === false) {
$("#main-header").removeClass("yellow-overlay").addClass("yellow-overlay-darker");
$(".site-info").first().addClass("is-description-visible");
preventScroll(e);
setTimeout(function() {
animationIsDone = true;
}, 1000);
}
});
This is what I have come with, but that way it doesn't matter the direction I scroll it triggers the event
The mousewheel event is quickly becoming obsolete. You should use wheel event instead.
This would also easily allow you to the vertical and/or horizontal scroll direction without scroll bars.
This event has support in all current major browsers and should remain the standard far into the future.
Here is a demo:
window.addEventListener('wheel', function(event)
{
if (event.deltaY < 0)
{
console.log('scrolling up');
document.getElementById('status').textContent= 'scrolling up';
}
else if (event.deltaY > 0)
{
console.log('scrolling down');
document.getElementById('status').textContent= 'scrolling down';
}
});
<div id="status"></div>
Try This using addEventListener.
window.addEventListener('mousewheel', function(e){
wDelta = e.wheelDelta < 0 ? 'down' : 'up';
console.log(wDelta);
});
Demo
Update:
As mentioned in one of the answers, the mousewheel event is depreciated. You should use the wheel event instead.
I know this post is from 5 years ago but I didn't see any good Jquery answer (the .on('mousewheel') doesn't work for me...)
Simple answer with jquery, and use window instead of body to be sure you are taking scroll event :
$(window).on('wheel', function(e) {
var scroll = e.originalEvent.deltaY < 0 ? 'up' : 'down';
console.log(scroll);
});
Try using e.wheelDelta
var animationIsDone = false, scrollDirection = 0;
function preventScroll(e) {
e.preventDefault();
e.stopPropagation();
}
$('body').on('mousewheel', function(e) {
if (e.wheelDelta >= 0) {
console.log('Scroll up'); //your scroll data here
}
else {
console.log('Scroll down'); //your scroll data here
}
if (animationIsDone === false) {
$("#main-header").removeClass("yellow-overlay").addClass("yellow-overlay-darker");
$(".site-info").first().addClass("is-description-visible");
preventScroll(e);
setTimeout(function() {
animationIsDone = true;
}, 1000);
}
});
Note: remember that MouseWheel is deprecated and not supported in FireFox
this one work in react app
<p onWheel={this.onMouseWheel}></p>
after add event listener, in function u can use deltaY To capture mouse Wheel
onMouseWheel = (e) => {
e.deltaY > 0
? console.log("Down")
: console.log("up")
}
Tested on chrome and
$('body').on('mousewheel', function(e) {
if (e.originalEvent.deltaY >= 0) {
console.log('Scroll up'); //your scroll data here
}
else {
console.log('Scroll down'); //your scroll data here
}
});