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
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.
As the users cursor is over a table row I'm showing a menu with extended information of that specific row. The problem is when the user scrolls down to the last couple of rows my menu overflows the viewport or window.
Is there a way to get notified when the menu is with-in 50px of the bottom of the viewport / window?
See snap shot
Yes, you'll need start by calculating two things:
The current position of the bottom of the viewport relative to the document
The current position of the bottom of the menu relative to the document
Once you have these two values, you can compare the two values to determine if the bottom of the menu is outside of the viewport. If the value for #2 is greater than the value of #1, then you're menu is outside of the viewport.
Here's some example code using jQuery for reference to get your started.
var $window = $(window),
$flyoutMenu = $('#flyout-menu'),
$viewportBottom = $window.scrollTop() + $window.height(), // value #1
$flyoutMenuBottom = $flyoutMenu.offset().top + $flyoutMenu.height(); // value #2
if (flyoutMenuBottom > $viewportBottom) {
alert('Menu is outside of viewport');
}
EDIT: More Information
You'll want to probably wrap this code in a function that get's called when you first open the flyout menu and again every time the window fires a scroll event.
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.