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.
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 have scenario where a check box will be enabled only when scroll section of div is fully scrolled.
Using above techniques and all the lookups I was able to scroll to last element of the div. But the problem is, there is some margin/padding which is left between last element and the scrolling div end section which is not making the checkbox to be enabled. If I give
WebElement element = driver.findElement(By.xpath("xpath"));
((JavascriptExecutor)
driver).executeScript("arguments[0].scrollIntoView(true);", element);
I am able to kind of focus on the scrolling div section, but not able to scroll.
Actions actions = new Actions(driver);
actions.moveToElement(element);
actions.perform();
Here, am able to move to last element of the div. but not end of scrolling div so, checkbox is still disabled.
js.executeScript("window.scrollBy(0,100);")
is scrolling the entire window which is expected. So, is there a way to explicitly scroll part of div?
Is there any tweaks that can be done in order to make the checkbox enabled?
First, Let's note some key ideas
key difference between scrollTo & scrollBy is that
scrollTo scrolls to a specific part of the website as you expect.
scrollBy scrolls to specific part FROM the current position.
You need to scrollTo not scrollBy, now let's scroll to the end of your div
Second important note is that the padding is considered a part of the element unlike margin, if you get an element's height, the padding is in that height
now get your element as a javascript object and assign it to a variable.
so Assign this
driver.executeScript("const myElem = document.getElementById('ELEMENT_ID'); return myElem")
to a WebElement object as this code will return your element, if it has no ID use any other JS method to get your element class or whatever.
we called it myElem so we can still refernce it with JS with that name, execute this on the driver
window.scrollTo(0, myElem.offsetTop + myElem.offsetHeight )
this scrolls to "your element's top coordinate" + "your element's height" which is just below it.
if the website was smart enough to detect that this scrolling was robotic, you can use
window.scrollTo({
top: myElem.offsetTop + myElem.offsetHeight,
left: 0,
behavior: 'smooth'
});
if there's still margin, get it the same way then add it to the top offset.
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 was wondering if anyone knows if there was a javascript or something that scrolls a site left right up and down on a click.
For example I want to create a site with multiple divs. Look at photo below.
I want each div to fit to screen and div 1 being the main div, the starting point. Say that I had a link in the menu for biography and the content for biography was in div 4 and someone click biography, I want the site to move down to div 3 and then right to div 4 and the same thing goes for div 4 and all the divs. When someone clicks a link in the divs I want the site to scroll in a direction I specify, is this possible.
Left Right Up Down
The jquery animate function is the right way.
Here you can find a simple and clear tutorial on how to use it: http://gazpo.com/2012/03/horizontal-content-scroll/
The tutorial is for horizontal scroll only, but you can easily extend to scroll your page in both directions (vertical and horizontal at the same time).
Yes, they are:
.scrollLeft()
.scrollRight()
With jQuery, you can animate the body's scrollTop value to scroll up and down:
$("html,body").animate({
scrollTop: $("#bio").offset().top
}, 1000);
The above code will scroll to the element with the id of #bio.
In terms of scrolling sideways, I supposed you could use a little trick. Set the body's overflow-x to hidden to hide anything that overflows to the right of the browser viewport. Then you can adjust the margin-left of body to "scroll" to the right or left. But, of course, this removes the ability for users to scroll through all of your divs.
$("body").animate({
marginLeft: "-100%"
}, 1000);
you can use jquery animate function ,it will give you more control
$('#div').animate({
left: '+=50'
}, 5000, function() {
// Animation complete.
});
read more from -
http://api.jquery.com/animate/
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