Pomocí elem.scrollIntoView definujte, kam se má prvek posunout

Dnes jsem narazil na tweet od Stuarta Langridge. Stuart sdílel fakt o metodě DOM scrollIntoView , což pro mě byla novinka. scrollIntoView umožňuje vrátit prvky zpět do viditelného výřezu posunutím nadřazeného kontejneru.

MDN definuje metodu takto:

document.querySelector('.some-elem').scrollIntoView();

Navíc scrollIntoView přijímá options objekt, který vám umožní nakonfigurovat tři věci:behavior , block a inline .

document.querySelector('.some-elem').scrollIntoView({
  behavior: 'smooth', // 'auto' or 'smooth'
  block: 'center',    // 'start', 'center', 'end' or 'nearest'
  inline: 'center'    // 'start', 'center', 'end' or 'nearest'
});

Použijte behavior vlastnost pro posouvání prvku do viditelné oblasti pomocí „plynulého posouvání“.

block a inline jsou možnosti konfigurace, které Stuart sdílel a které pro mě byly nové. Tyto vlastnosti umožňují definovat pozici posouvání prvku na block a inline osa při použití scrollIntoView . V režimu zápisu shora dolů a zleva zapisovat block rozměr je osa Y a inline rozměr je osa X. Pokud si chcete o tomto tématu přečíst více, doporučuji přečíst si tento článek od Rachel Andrew.

Možné hodnoty polohy rolování pro obě osy jsou start , center a end . Pokud nechcete vybrat konečnou pozici posouvání, ale chcete posouvat co nejméně nearest je také možnost.

To je velmi cool věc! Byl bych rád, kdyby lidé používali tuto funkci častěji, protože dávám přednost posouvání prvků do středu výřezu než nahoru nebo dolů.

Pokud si s tím chcete pohrát, napsal jsem rychlé CodePen a tweetoval krátké video.

Doporučuji ošetřit scrollIntoView 's option parametr a jeho zahrnutá pozice posouvání jako progresivní vylepšení, protože v době psaní tohoto článku popsaná funkce ještě není podporována napříč prohlížeči.

MDN Compat Data (zdroj)
Informace o podpoře prohlížeče pro options parametr
61 61 79 36 36 Ne Ne 8.0 61