ReactJS scroll offset incorrect - javascript

How could I fix scroll position on country list when there is sticky positioned element on top of long item list. I have created a sandbox to show the problem (below post).
Use case: If I click on country "Kenya", page scrolls in to "red zone" (footer text). Sadly, cannot make it scroll up to "green zone", where the country content is what ever country is clicked. It works fine for the countries starting with "A" letter (sort of).. scroll position is not below sticky element.
https://codesandbox.io/s/j69bwo?file=/src/App.js
Any help will be appreciated.

The countries list height when collapsed will force the page to scroll to the bottom.
One solution is using scrollIntoView method to scroll to the wrapper element after choosing a country.
const wrapperRef = useRef();
const showCountry = (item) => {
setView({ list: false, item: true });
setItem(item);
wrapperRef.current.scrollIntoView();
};
// code...
<div className="wrapper" ref={wrapperRef}>

Related

How to stay in same scroll position when adding items to the top of a div?

I want when the user scrolls from the bottom to the top of a div to load more items into that div to the top part of the div and I want to maintain the scroll position (or rather make sure the top item before adding more items is still visible after adding the items)
For example if I have item 100 on the top and 100 more items has been loaded into the div then I want item 100 to still be the focus of the scroll position, currently when I add items to the div it jumps to item 200...
I'd love to get help with this issue, thanks in advance :)
I found this answer useful, I just created the same logic but in React
jquery - keep window from changing scroll position while prepending items to a list?

Scrolling element scrollbar jumping to top after re-render

I'm using Gatsby and i made a vertical side navigation menu. I used useRef for navigation wrapper and for every item inside menu for getting some height values. Then I calculated the scroll position for active navigation link as you can see below and set scrollTop value for navigation wrapper and i can align scroll bar to active link item.
function calculateScrollPosition(wrapper, link) {
const distance = wrapper.current.scrollHeight - wrapper.current.offsetHeight
const scrollUnit = wrapper.current.scrollHeight / distance
const itemOffset =
wrapper.current.scrollHeight / 2 < link.current.offsetTop
? link.current.offsetTop + link.current.clientHeight
: link.current.offsetTop - link.current.clientHeight
const position = Math.floor(itemOffset / scrollUnit)
wrapper.current.scrollTop = position
}
and i am calling it here
useEffect(() => {
if (activeLink) {
calculateScrollPosition(list, activeLink)
}
}, [activeLink])
But each time I click the link inside sidebar and change the page, scrollbar of navigation jumping to top for a second and then finding the right place. I expect it to go to new position from last position, not jumping to top. Any help i will appreciated.
Thank you for your comments. I actually fixed my problem so i want to explain how i did.
As i mentioned, I'm using Gatsby and i have multi-lang website. Pages creating dynamically with .md files. Gatsby re-renders when the top level component changes between pages. Actually that was broke my sidebar transitions too because it was unmount and mount layout again when i change page.
Gatsby doesn't automatically wrap pages in a layout component. So I wrapped pages with layout using gatsby-plugin-layout. I made 2 different layout. One of it main layout with sidebar and header, other one for my dynamically created pages. I can use one of inside another. Now its not re-render my main layout, it is just re-render layout which i created for pages inside main layout, scrollbar not jumping to top and transitions are works fine.
I don't know if i explained well. I hope it helps others who have the same problem.

Mechanism to update scroll index based on scroll position

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

Slide parent DIV to top when input field is selected

When someone clicks on a specific input field on my website, particularly on a mobile device, I need the parent div of the input field to slide to the top of the page. I need this because the keyboard that pops up covers the entire div below the input field, which is showing the user the items that they are filtering through. I've laid out the problem below graphically. I'd appreciate some guidance here :)
Starting state:
Finished state:
something like this oughtta do:
$('input').focus(function (event) {
var offset = $('header').height();
$('body, html').animate({
scrollTop : offset
})
})
JSBin

How to get notified if a menu is overflowing the viewport

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.

Categories