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.
Related
I have a page which has fixed header. On that page I have a table which has the functionality that when clicked on a row, the page scrolls to that element. Each table row has an id which matches the element's id. So on click, I get the element's id and then execute this function
element.scrollIntoView({block: 'start', behavior: 'smooth'})
The problem with this approach is the scroll goes too far and some portion of the element is hidden underneath the fixed header. I looked at lot of solutions on stack overflow but none of them worked for me. I want the scroll to end at the element top.
So, I then tried using
element.scrollTo({top: element.offsetTop, behavior: 'smooth})
I did some calculations like considering padding/margin and got it to work. The problem is the offsetTop is different on different device. The above logic doesn't work for mobile and tablet. the offsetTop is distance of the current element relative to the top of the offsetParent which will not be the same for each device.
I know that scrollIntoView will be my best bet but not sure how to prevent the element from scrolling underneath the fixed header. Any help is appreciated.
I've tested and researched a little bit and maybe this is what you need.
const position = element.getBoundingClientRect().top + window.pageYOffset - header.clientHeight;
window.scrollTo({ top: position, behavior: 'smooth'});
I notice a feature on this site:
and feature on this site:
If you scroll the items in the middle section, the left menu title will update based on the position of middle section scroll position.
I know it has to handle the scroll event in the middle section, but then what?
Does it just use an existing library? What is the mechanism to implement this feature?
Ok so here we have two things to deal with :
We must know when the top of a specific section is at the top of the viewport (your webrowser window)
Then and only then when the specific section if at the top we update the menu according to it
You can easily do that by putting a specific ID to your section, then get the offset.top() position of that element and listening to the window.onscroll and when the current scroll position is equal to the offset.top() position of your element you will add maybe an active class to your menu
like so
<div id="my-section"></div>
var mySection = document.getElementById("my-section"),
mySectionTopPosition = mySection.offsetTop,
currentWindowScrollPosition = window.pageYOffset;
Then if currentWindowScrollPostion === mySectionTopPosition you will do something accordingly
See this : Getting Window X Y position for scroll and On Scroll Animation using jQuery
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.
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... :)
On my webpage I have an overflowed div (i.e. with the vertical scrollbar). Inside the div, I have anchors with ids. When I put one of these ids in the URL (mypage.html#id), I want the div, not the page, to scroll to that anchor.
How do I do that, preferably with plain JavaScript? If it's too complex, I'll go with jQuery, but I'm not using it in this project for anything else.
$('.overflow').scrollTop($('#anchor').offset().top);
There is no reason at all you can't convert this to standard javascript.
Note that the scroll will be off if there is a margin on the anchor element.
Have you tried to set focus() on the anchor?
Any DOM element with a tabindex is focusable, and any element which has focus will be scrolled into view by the browser.
This is a pure Javascript (ECMA 6) solution, similar to Ariel's answer.
const overflow = document.querySelector('.overflow');
const anchor = document.getElementById('anchor');
// Get the bounding client rectangles for both
// the overflow container and the target anchor
const rectOverflow = overflow.getBoundingClientRect();
const rectAnchor = anchor.getBoundingClientRect();
// Set the scroll position of the overflow container
overflow.scrollTop = rectAnchor.top - rectOverflow.top;
For those of you in nearly any major browser in 2021, use element.scrollIntoView().
https://developer.mozilla.org/docs/Web/API/Element/scrollIntoView
The Element interface's scrollIntoView() method scrolls the element's
parent container such that the element on which scrollIntoView() is
called is visible to the user - MDN Web Docs
Example:
var myEl = document.getElementById("child");
myEl.scrollIntoView()
or with Parameters -- Not supported in Safari or Internet Explorer:
myEl.scrollIntoView({
block: "center" // Start, center, end, or nearest. Defaults to start.
behavior: "smooth"
})