How scroll the viewport together with transition effect?-CodePudding

in the following example there are several DIVs that use transition effect, how can you scroll the
viewport up and down smoothly with the expansion so that the user can always see the full square?

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border-style: solid;
  border-width: 1px;
  width: 100px;
  height: 100px;
  background-color: #0000ff;
 transition: 0.5s;
}

div:hover {
  background-color: #ffcccc;
  width: 100px;
  height: 200px;
}
</style>
</head>
<body>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

</body>
</html>

CodePudding user response：

you can do that with scrollIntoView

const divs = document.querySelectorAll('div')
divs.forEach(item=>{
  item.addEventListener('mouseenter',(e)=>{
   e.currentTarget.addEventListener('transitionend',(e)=>{
  e.currentTarget.scrollIntoView({behavior: "smooth", block: "nearest", inline: "nearest"});
   })
  })
})

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border-style: solid;
  border-width: 1px;
  width: 100px;
  height: 100px;
  background-color: #0000ff;
 transition: 0.5s;
}

div:hover {
  background-color: #ffcccc;
  width: 100px;
  height: 200px;
}
</style>
</head>
<body>

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>

</body>
</html>