Comments (12)
🎉 This issue has been resolved in version 2.2.15 🎉
The release is available on:
Your semantic-release bot 📦🚀
from scroll-into-view-if-needed.
The new release is tested against your code but let me know if there's still a problem 🙂
from scroll-into-view-if-needed.
@stipsan You're the man )
from scroll-into-view-if-needed.
Oh, actually, 2.1.0
doesn't work in some cases too.
So I reverted to 1.5.0
.
1.5.1
doesn't work while 1.5.0
does.
from scroll-into-view-if-needed.
Thanks for the report! Is it possible to share a link to the real world use case where it happens?
In v1 offsetLeft
and offsetTop
is used to calculate scrolling coordinates. In v2 this had to refactor to use getBoundingClientRect
instead to support SVG-in-HTML use cases, as SVG elements do not have these properties.
Another cause for the major difference in scrolling behavior is that v1 performs everything in a single loop:
- Find closest scrollable element.
- Calculate where it should scroll.
- Perform scrolling.
- Check if more scrolling is needed to make the element visible, if yes repeat step 1.
In v2:
compute-scroll-into-view
finds all scrollable parent elements first.- Loop through the element and create an array over elements and their coordinates.
- Return the list to
scroll-into-view-if-needed
which loops it and scrolls the elements.
V1 is very stable and mature but unfortunately without a solid testing suite. I am focusing now on expanding the testing suite in v2 to help mature it and get it to the same stability as v1. Reports like yours is really helpful for gathering test cases and scenarios so thanks again 😄 👍
from scroll-into-view-if-needed.
Is it possible to share a link to the real world use case where it happens?
We didn't roll it into production because the bug was discovered, so I guess it isn't.
to support SVG-in-HTML use cases
Yeah, SVG is becoming more popular these days.
We ourselves use SVG quite often (because of React).
Without React SVG would be much less used.
compute-scroll-into-view finds all scrollable parent elements first.
Yeah, I noticed: it found <body/>
and <html/>
(two of them).
I am focusing now on expanding the testing suite in v2 to help mature it and get it to the same stability as v1.
👍
Reports like yours is really helpful for gathering test cases and scenarios so thanks again
You're welcome.
from scroll-into-view-if-needed.
@stipsan I made a demo for you.
Give me your email address and I'll email you a link to the archive.
Screenshot:
Extract to a folder, run npm run dev
, go to localhost:3002
, click on the "RESIDENCY" select and see how it scrolls into view.
Then open console and enter scrollIntoView2 = true
.
Hit "Enter".
Scroll to the bottom of the page and click "RESIDENCY" select again — it will scroll top instead of scrolling bottom (or instead of not scrolling at all).
The flag is in node_modules/react-responsive-ui/modules/Expandable.js
:
var _scrollIntoViewIfNeeded = require('scroll-into-view-if-needed');
var _scrollIntoViewIfNeeded2 = _interopRequireDefault(_scrollIntoViewIfNeeded);
var _scrollIntoViewIfNeeded_2 = require('scroll-into-view-if-needed-2');
var _scrollIntoViewIfNeeded_22 = _interopRequireDefault(_scrollIntoViewIfNeeded_2);
...
if (expanded) {
// https://github.com/stipsan/scroll-into-view-if-needed/issues/359
if (window.scrollIntoView2) {
(0, _scrollIntoViewIfNeeded_22.default)(_this3.container,
{
scrollMode : 'if-needed',
behavior : 'smooth',
block : 'nearest',
inline : 'nearest'
})
} else {
(0, _scrollIntoViewIfNeeded2.default)(_this3.container, false, { duration: 300 });
}
}
from scroll-into-view-if-needed.
You can send it to [email protected] 👍
from scroll-into-view-if-needed.
Sent
from scroll-into-view-if-needed.
Sweet! I'll post back here when it's resolved 😄
from scroll-into-view-if-needed.
Ok )
We're fine with 1.5.0 for the time being.
from scroll-into-view-if-needed.
Well the code you shared with me made it really easy for me to fix this 😄
from scroll-into-view-if-needed.
Related Issues (20)
- [BUG] Safari on macOS Monterey 12.3.1
- "Cannot use import statement outside a module" error when using v2.2.31 HOT 1
- Dealing with a Fixed Navbar HOT 2
- "export 'default' (imported as 'compute') was not found in 'compute-scroll-into-view' HOT 1
- t.scroll is not a function HOT 1
- [TS] typedoc TS1479 error HOT 8
- scrollIntoView does not work anymore for element in shadow dom
- something is wrong with the [email protected] project HOT 11
- scroll position error with `display: none;` element HOT 1
- Add an options to skip in document check or pass a new `document`
- Body behind the modal scrolls HOT 1
- Snaps instead of scrolling smoothly. HOT 2
- Unneeded scrolling of ancestors HOT 1
- how to know when scrolling is complete?
- Does not scroll to element in iframe outside viewport HOT 2
- How can I combine behavior function and behavior smooth
- Shadow DOM support? HOT 2
- Dependency Dashboard
- Scroll horizontally only inside a specific div HOT 1
- Horizontal RTL scrolling goes wrong way HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from scroll-into-view-if-needed.