Just to provide context: I want to simulate mouse scroll on Google photos (photos.google.com).
The page contains scroll bar only for a portion of the page (the top "Search" section does not have a scroll bar).
The following does not work (but it works fine for scrolling on say Facebook, or SO):
window.scrollTo(0, 10000000)
Any clues on how I can simulate mouse scroll ?
If you aren't scrolling the whole window then window.scrollTo is not what you want. You can scroll a section of DOM that has a style of overflow: scroll with something like:
var scrollBox = document.getElementById('sectionId');
scrollBox.scrollTop = 100; // num pixels from element top you want to scroll down
Which is the same as:
$('#sectionId').scrollTop(100);
You might want to consider a library like https://github.com/kswedberg/jquery-smooth-scroll which scrolls the screen in an ease-in ease-out fashion, which is easier for users to follow.
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:
I'm trying to do something that I think has to do with parallax or sticky libraries but having a bunch of trouble.
I'd like to let the user scroll normally, and then when a particular div is a particular value (lets say 232px) from the top of the screen, I want to hold the element in place (ie give it position:fixed). This part is easy to get the offset:
$('element')product1[0].getBoundingClientRect().top;
Then, let the user continue to scroll with the element in place so they can see the background continue to move with the scroll (I have a large height background with a nice linear-gradient).
Then after the user scrolled for about 1000px I want to release the element and let it continue to move up with the scroll. The same should happen when the user scrolls back up - it holds for a bit then releases.
I've tried a bunch of different things and combinations of libraries, pure css, JS, etc. Nothing works well. Everything has an issue. Would love to see a clean solution.
Things I've tried:
-JQuery sticky libraries (could not find one that does or is customizable to what I need)
-Vanilla JS tracking position (had jumping issues on release - element would fly far away on release, not continue from release position)
-CSS, specifically translateZ
The ideal setup is:
<div style="height: 230vh; background: linear-gradient(coolOne)">
<div class="containerToStickTemporarily">
<p class="textOnLeft">Hi</p>
<img src="myImage.png"/>
</div>
</div>
And I'd like to have multiple of these in a row.
Something like that.. I guess
$(window).scroll(function(){
var top = $(window).scrollTop();
$('element').css({ position: top > 230 && top < 1000 ? 'fixed' : 'relative' });
})
Have put together a sticky navbar (jsfiddle) that comes into view only after the user scrolls down 10px from the top of the document. However as seen in the fiddle; using:
$(window).scroll(function () {
if ($(this).scrollTop() > 10) {
document.getElementById('navig').style.visibility = 'visible';
this only works in the first instance after the code is run. In subsequent similar actions (after scrolling down the document completely and scrolling back up again) in the same session, the navbar comes into appearance much further down than 10px. It only works again on refresh (rereun) and that too again, only the first instance of top to bottom scrolling.
Also, I'd want the effect to act on scrolling back up ie. the fixed navbar should become absolute at the base of the header when the user moves past that point. And it should hide when scrolling past 10px from top. There isn't a scrollBottom() function, so how is this handled?
This fiddle has jquery loaded: https://jsfiddle.net/6ss64s7e/
How can these issues be addressed? (pardon, am new to javascript).
Before you return to the value position:absolute; you have to delete all the other properties that you added because they won't be automatically deleted - so, you don't need top:0; anymore.
You can delete the top:0; property by passing empty string to its value, like this:
$('#navig').css({'position':'absolute','top':''});
For the detection of scroll and its direction, see this question.
I am facing a problem with set scroll bar top position. Actually what I need is; I am using a JQuery Keyboard plugin where for all the elements I need to display the virtual keyboard at the center bottom of the page and its done.
But the problem I am having is when I have a input field near to the bottom of the page where that page does not display the scroll bar (It means there is no need of overflow because all the elements I have is visible in my page). Since I am displaying the virtual keyboard at the bottom of the page and when the focused element also is at the bottom of the page I need to initiate the scroll bar and page should go up by scroll down automatically so active input field element is visible to me.
I tried to set the scroll bar by using this
$(document).scrollTop(_scroll_top + (_el_top + _el_height) - _keyboard_top);
Where _scroll_top is my current scroll top position, _el_top is focused elements top position, _el_height is my focused elements height and _keyboard_top is the top position of the keyboard.
Now the problem is when I have a more height page (It means scroll bar size is small i.e. scroll bar size may be around 60% of the screen.Height) scrollTop is correctly working and I can see the active input element even though keyboard is visible. But when I have small height of a page (Example: scroll bar size is around 90% or it may be same size of screen.Height) scrollTop is is not working correctly so the active input element is not visible and it is behind to virtual keyboard.
How can I set the scroll top correctly so I will be able to see the active input element then at the bottom of that element I can see virtual keyboard.
Please see the attached image. That is where actually active input element should be displayed.
First Image is Before Enable the keyboard: Just see the element's position, sroll top
Second Image is After Enable the keyboard: Just see the element's position, sroll top
This is what I need when my scroll bar size is big (Around 90% of the screen.Height)
Thanks in advance.
P.S: I am extremely sorry if I confuse by the way I expressed my question.
use jQuery('html,body').scrollTop('other things here');
Thanks for the responses.
I have found the solution for my question.
At the bottom of the page I have created a dummy div element.
<div id="scroll_dummy"></div>
Initially this div will be having zero height. I applied the height of the keyboard to this div. As a result your page size will be increased so it can easily move the scroll top. At the time of close again revert back this style.
Then at the place of I am applying scrollTop I have done this.
$("#scroll_dummy").css("height", _keyboard_height);
$(document).scrollTop(_scroll_top + (_el_top + _el_height) - _keyboard_top);
Where
_scroll_top : scroll top position
_el_top : active element top position
_el_height : active element height
_keyboard_top : keyboard element top position
_keyboard_height : keyboard element height position
Done with this... :)
I'm using jquery to provide clickable overlays, I'd like to replace the default Scroll up/down methods with left/right (So when you scroll the page it moves horizontally not vertically. I'm worried about the scroll function still working as intended within the overlays.
Update: If it's not possible to scroll the browser what about a div that has a horizontal scroll bar that on scroll up/down moves left to right (as well as anchors)
My JavaScript experience is somewhat limited, any guidance with this matter would be greatly appreciated
Thanks!
Found an appropriate solution with:
http://plugins.jquery.com/project/ScrollTo
my code:
function shiftScroll(offset) {
console.log('current:' + window.pageXOffset);
console.log('currentY:' + window.pageYOffset);
$(window).scrollTo(window.pageXOffset + offset, window.pageYOffset, {axis:'x'});
}
I still need to disable the vertical scroll bars in the body, while not disabling the vertical scroll bars in elements within the page.