I have a simple image gallery here. All I want to do is to scroll through the list of images when the user scrolls his mouse.
Any ideas ? $('').scroll() definitely doen't work. Even if i bind it to the window by
$(window).scroll(function() {
//do something
});
It doen't work , because my window has too less height to be scrollable.
This is not jQuery, but there is a pure JS plugin to capture the mouse scroll event:
http://viralpatel.net/blogs/javascript-mouse-scroll-event-down-example/
demo:
http://viralpatel.net/blogs/demo/javascript-mouse-scroll-wheel-event.html
Related
I am using css scroll snap to scroll through that are 100vh in height. The scroll snap works beautifully.
That said I need to determine how far the site visitor has scrolled for a few different reasons.
I have tried:
let wrapper = document.getElementById('landing-page-wrapper');
console.log(wrapper.offsetTop);
console.log(window.scrollY);
I have also tried window.scrollTop, wrapper.scrollTop and more.
Here is a Codepen of what I am seeing
How can I know the distance scrolled while using 100vh sections and css scroll-snap
TIA
Based on your shared code, the reason why window.onscroll does not work as expected is because neither window nor document.body are overflowing vertically. Only the element that is overflowing will fire the scroll event, and in this case it is actually the element that matches the .box-wrapper selector.
Therefore if you listen to the scroll event on that element, then you should be able to retrieve its vertical scroll position using event.currentTarget.scrollTop:
document.querySelector(".box-wrapper").addEventListener("scroll", (e) => {
console.log(e.currentTarget.scrollTop);
});
See proof-of-concept example:
im trying to create a website that listens to the scrolling event of the entire website. The website in question is exora-it.nl. As you can see when scrolling down is that the mousetracking function updates ONLY after moving your mouse.
My problem is that I want it to happen on actually scrolling down/up the website, so that the overall image is smoother. Anyone who can help me out?
If you're using jQuery, you can simply do this:
$( window ).scroll(function() {
// Do something
});
You can track the scrolling offset of the current window:
var offsetX=window.pageXOffset
var offsetY=window.pageYOffset
And then add this offset to the position of whatever element you're trying to move.
I'm trying to focus the top of a div on an anchor click using the below code.
$('html, body').animate({scrollTop: $("#" + divid).offset().top}, 100);
However, it is not getting scrolled to the top of div , rather the focus goes to a position inside the div. I cross checked the offset().top value of the div with the top value in Page Ruler chrome addon and they are in sync.So ideally it should scroll to the top of div. Any suggestion would be really helpful.
Your fiddle seems to be working (except that you forgot preventDefault() in the click handler).
Generally, you need to account for border, padding, margin on the scroll container (the window in your case). For a generic solution, have a look at this gist.
Sorry, I'm new to javascript, and I'm stumped with this problem.
I have a div in fixed position at the top of my page.
In it are links that when you click, the page scrolls to an anchor. (I used jquery for this.)
I also used javascript to make the "back to top" button appear whenever someone click any of these links, and disappear when they click the "back to top" button itself.
...But it occurs to me that sometimes people will just use the scroll bar instead of the buttons.
Is there a way to make the "back to top" button appear when users scroll down using the scroll bar, and disappear when they scroll back to the top?
In other words, is there an attribute that I can use to assess what anchor is currently at the top of the page? (If so, I can probably figure out the solution from there...)
...Or maybe there is some way to know when users have scrolled back to the top so I can use javascript to get rid of the "back to top" button?
Any help appreciated! Thanks!!
You can get the scroll position with
var scrollTop = $(window).scrollTop();
http://docs.jquery.com/CSS/scrollTop
There are some more hints here: How do I determine height and scrolling position of window in jQuery?
You can use the scrollTop() function in jQuery to determine scrolling distance.
F.ex:
$(window).scroll(function() {
$('#backtotop').toggle( $(this).scrollTop() );
});
This will hide the element with backtotop as ID when the scrolled distance is 0.
If you like a non-jQuery solution, I’m pretty sure you can use the window.scrollY property:
window.onscroll = function() {
if (!window.scrollY) {
// hide it
} else {
// show it
}
};
I've been trying to get a DIV to move up when using the scroll on browser to move down, but I can't find a solution which works.
More specifically, for example if I fill a DIV with images, I want these images to scroll upwards when I scroll the browser window scrollbar downwards. So as you move longer down the page, the DIV moves upwards and shows more images.
Could you give me some suggestions how to receive such an effect?
Try something like this:
$(window).scroll(function(){
$("#scrollingDiv").stop().animate({ "marginTop": ($(window).scrollTop() + 30) + "px"}, "slow");
});
I don't entirely follow what you are trying to do with the <div> content, but there is an easy way to detect page scrolling with jQuery:
$.scroll(function() {
alert('Scroll position: ' + $('html').scrollTop());
});
From there, you can position whatever you want, however you want, using this value $('html').scrollTop().
Maybe I'm misunderstanding but, are you trying to keep your DIV in a fixed position regardless of how far the user scrolls down the page?
If so there's a style for that:
position:fixed