LOE
League of Extraordinary FoundryVTT DevelopersDaniel Thorp

Scroll Into View troubles

Anyone know why Element.scrollIntoViewIfNeeded() is working, but Element.scrollIntoView() isn't? The IfNeeded version is apparently "Non-Standard" https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded Not sure what I should do here... Could someone test which works best on your Foundry instance?
No description
C
Calego•1,007d ago
Take a look if there's a jQuery utility for that
DT
Daniel Thorp•1,007d ago
But JQuery is bad...
C
Calego•1,007d ago
While yes This is exactly it's use case Under the skin, jQuery has a lot of cruft that more or less ensures cross browser support That's one reason why it's been left, has a lot of old bad code. There's points though where you want those fallbacks
C
Calego•1,007d ago
http://youmightnotneedjquery.com/
You Might Not Need jQuery
Examples of how to do common event, element, ajax and utility operations with plain javascript.
C
Calego•1,007d ago
Another thing to take a look at
DT
Daniel Thorp•1,007d ago
Do you see an issue with just using scrollIntoViewIfNeeded()? It seems to work perfectly and its vanilla chefkiss I think I'm going to continue using what I have now since it seems to work fine, but thanks!
LTL
Leo The League Lion•1,007d ago
@arcanistzed gave vote LeaguePoints™ to @mouse0270 (#49 • 32)
C
Calego•1,007d ago
@arcanistzed
No description
C
Calego•1,007d ago
No Firefox support looks like
DT
Daniel Thorp•1,007d ago
No one use Firefox 😏 Fine, I'll use JQuery sadsprout
UU
Unknown User•1,007d ago
DT
Daniel Thorp•1,007d ago
The thing is, developing for Foundry is my first experience with development, so I'm learning all of the habits I will have for the rest of my career. I don't want to be dependent on JQuery So, if there's any other way, I would prefer it
C
Calego•1,007d ago
Felt dirty coming back to jQuery after so long The thing is, scrolling to a place it's kinda difficult to do in a performant, cross browser way. Every platform/framework's got some quirk to make it happen. At work mine is telling product "we don't do that" We did it once, it was buggy as hell and you hated it, we're not doing it again
UU
Unknown User•1,007d ago
DT
Daniel Thorp•1,007d ago
I'll try that, thanks I can always add my own animations 🙂
UU
Unknown User•1,007d ago
DT
Daniel Thorp•1,007d ago
You get a point for giving an answer either way 🙂
UU
Unknown User•1,007d ago
C
Calego•1,007d ago
Try this I conjunction: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
scroll-behavior - CSS: Cascading Style Sheets | MDN
The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.
DT
Daniel Thorp•1,007d ago
I tried using anchors and running location.href = "#elementId", but that shows: "Are you sure you want to leave this page?"
UU
Unknown User•1,007d ago
DT
Daniel Thorp•1,007d ago
Yes, before
UU
Unknown User•1,007d ago
DT
Daniel Thorp•1,007d ago
I haven't tried your thing yet (not at computer)
DT
Daniel Thorp•1,006d ago
It looks a bit weird because the current phase is always on top. I would expect that it only changes once the element isn't visible.
No description
UU
Unknown User•1,006d ago
DT
Daniel Thorp•1,006d ago
You can always use jQuerys $('#CONTAINER').scrollTo('#TARGET'); which would on pretty much any browser.
Doesn't work :/
No description
DT
Daniel Thorp•1,006d ago
$(".scsButtons").scrollTo(".phase-button.active");
$(".scsButtons").scrollTo(".phase-button.active");
UU
Unknown User•1,006d ago
DT
Daniel Thorp•1,006d ago
I don't see the advantage in that case yeah
UU
Unknown User•1,006d ago
DT
Daniel Thorp•1,006d ago
This is exactly what I had been trying except for the height, thanks!
LTL
Leo The League Lion•1,006d ago
@arcanistzed gave vote LeaguePoints™ to @mouse0270 (#47 • 34)
DT
Daniel Thorp•1,006d ago
This only scrolls down 🤔 Figured it out though! 
// Scroll the active phase button into view
let scrollToElement = document.querySelector(".phase-button.active");
if (scrollToElement.parentNode.scrollTop + document.querySelector(".scsButtons").clientHeight < scrollToElement.offsetTop) {
  scrollToElement.parentNode.scrollTop = scrollToElement.offsetTop - 4;
} else if ( scrollToElement.offsetTop < scrollToElement.parentNode.scrollTop) {
  scrollToElement.parentNode.scrollTop = scrollToElement.offsetTop - 4;
};
// Scroll the active phase button into view
let scrollToElement = document.querySelector(".phase-button.active");
if (scrollToElement.parentNode.scrollTop + document.querySelector(".scsButtons").clientHeight < scrollToElement.offsetTop) {
  scrollToElement.parentNode.scrollTop = scrollToElement.offsetTop - 4;
} else if ( scrollToElement.offsetTop < scrollToElement.parentNode.scrollTop) {
  scrollToElement.parentNode.scrollTop = scrollToElement.offsetTop - 4;
};
DT
Daniel Thorp•1,006d ago
No description
UU
Unknown User•1,006d ago
Want results from more Discord servers?
Add your server
More Posts
DevMode Settings Explorer feedbackSo, I'm working on the styling for a little potential addition to Calego's 'Developer Mode' module aOverlay hiding starsHey y'all! I've run into a general CSS/design problem that I'm kinda stumped on solving. In the imagToDontThingswe should have threaded a long time ago I think, whoopsLayer Manipulationpresumably a module doing this would execute on canvasReady or something for every client right?Document TimestampsIs there a way to find the timestamp of the last edit made to a Document?License Property@ghost @flamewave000 @corporat @kakaroto But if we do want to talk Manifest+, we should do that oveTemporary DocumentsIs there a built-in way to create temporary entities? Like entities wich are not stored in the databLogin Via POSTlook at your network tab when you click the join button, you'll see the POST with the data it sends,Crit confirm change targetLooks like Fury merged the thing already, so whatever you do would no longer be relevant for the MR.Actor Sheet ChangesActor Sheet changes: -**NPC, Character**: `systems/dnd5e/templates/actors/parts/actor-warnings.html`Dors projectTo be clear, I'm very open to the feedback that I'm doing something stupid here, hah. This is my firAC MigrationsAs of 1.4.1 there are two migration scripts for AC related changes: 1. The standard Migration Scrip