javascript 将DOM元素滚动到视图中

Posted 2021-05-03

<ul>
  <li>Jason Nielsen</li>
  <li>Cathy Cunningham</li>
  <li>Eric Park</li>
  <li>Erin West</li>
  <li>Sara Weiss</li>
  <li>Angela Bates</li>
  <li>Bobby Bradshaw</li>
  <li>Christopher Woodward</li>
  <li>Jackie Turner</li>
  <li>Travis Harris</li>
  <li>Vanessa Rose</li>
  <li>Wendy Washington</li>
  <li>Juan Bond</li>
  <li>Sandra Olson</li>
  <li>James Wilson</li>
  <li>Samantha Stevens</li>
  <li>Brent Powers</li>
  <li>Sarah Padilla</li>
  <li>Paul Nelson</li>
  <li>Yesenia Johnson</li>
  <li>Janice Mccormick</li>
  <li>Shawn Casey</li>
  <li>Amber Conrad</li>
  <li>Frederick Kelly</li>
  <li id="julie">Julie Green</li>
  <li>Luis Higgins</li>
  <li>Sandra Bright</li>
  <li>Michael Reeves</li>
  <li>Julie Green</li>
</ul>

const julie = document.getElementById('julie');

// align top
//julie.scrollIntoView(true) 

// align bottom
//julie.scrollIntoView(false) 

/* newer object syntax
julie.scrollIntoView({
  behavior: smooth | auto;
  block: start | center | end | nearest;
  inline: start | center | end | nearest;
});
*/

julie.scrollIntoView({
  block: 'center',
});