Topics

League of Extraordinary FoundryVTT Developers•4y ago

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

36 Replies

Calego•4y ago

Take a look if there's a jQuery utility for that

Daniel ThorpOP•4y ago

But JQuery is bad...

Calego•4y 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

Calego•4y ago

http://youmightnotneedjquery.com/

You Might Not Need jQuery

Examples of how to do common event, element, ajax and utility operations with plain javascript.

Calego•4y ago

Another thing to take a look at

Daniel ThorpOP•4y ago

Do you see an issue with just using scrollIntoViewIfNeeded()? It seems to work perfectly and its vanilla chefkiss

chefkiss

I think I'm going to continue using what I have now since it seems to work fine, but thanks!

Leo The League Lion•4y ago

@arcanistzed gave LeaguePoints™ to @mouse0270 (#49 • 32)

Calego•4y ago

@arcanistzed

No description

Calego•4y ago

No Firefox support looks like

Daniel ThorpOP•4y ago

No one use Firefox 😏 Fine, I'll use JQuery sadsprout

sadsprout

Unknown User•4y ago

Message Not Public

Sign In & Join Server To View

Daniel ThorpOP•4y 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

Calego•4y 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

Unknown User•4y ago

Message Not Public

Sign In & Join Server To View

Daniel ThorpOP•4y ago

I'll try that, thanks I can always add my own animations 🙂

Unknown User•4y ago

Message Not Public

Sign In & Join Server To View

Daniel ThorpOP•4y ago

You get a point for giving an answer either way 🙂

Unknown User•4y ago

Message Not Public

Sign In & Join Server To View

Calego•4y 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.

Daniel ThorpOP•4y ago

I tried using anchors and running location.href = "#elementId", but that shows: "Are you sure you want to leave this page?"

Unknown User•4y ago

Message Not Public

Sign In & Join Server To View

Daniel ThorpOP•4y ago

Yes, before

Unknown User•4y ago

Message Not Public

Sign In & Join Server To View

Daniel ThorpOP•4y ago

I haven't tried your thing yet (not at computer)

Daniel ThorpOP•4y 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

Unknown User•4y ago

Message Not Public

Sign In & Join Server To View

Daniel ThorpOP•4y ago

You can always use jQuerys $('#CONTAINER').scrollTo('#TARGET'); which would on pretty much any browser.

Doesn't work :/

No description

Daniel ThorpOP•4y ago

$(".scsButtons").scrollTo(".phase-button.active");

$(".scsButtons").scrollTo(".phase-button.active");

Unknown User•4y ago

Message Not Public

Sign In & Join Server To View

Daniel ThorpOP•4y ago

I don't see the advantage in that case yeah

Unknown User•4y ago

Message Not Public

Sign In & Join Server To View

Daniel ThorpOP•4y ago

This is exactly what I had been trying except for the height, thanks!

Leo The League Lion•4y ago

@arcanistzed gave LeaguePoints™ to @mouse0270 (#47 • 34)

Daniel ThorpOP•4y 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;
};

Daniel ThorpOP•4y ago

No description

Unknown User•4y ago

Message Not Public

Sign In & Join Server To View

League of Extraordinary FoundryVTT Developers Join

4.1KMembers

View on Discord

Want results from more Discord servers?

Add your server