javascript - 网络 : how to zoom into a grid item and keep the item centralized in the viewport

Question

所以我有一个网格，我想在其中放大网格元素

我在用什么？ transform: scale() 缩放网格容器，element.scrollIntoView() 将网格元素移动到视口(viewport)的中心

问题是什么？

css transform: scale() 聚焦在元素的中心。 这会导致 scale() 导航到网格右侧的缩放效果，因为它是网格容器的中心，我想缩放网格项，只让它聚焦在视口(viewport)的中心。 我有一个包含很多元素的网格，它比视口(viewport)大，所以当我执行 scale() 时，视口(viewport)移动到网格容器的中心，而不是放大到当前视口(viewport)中心

我目前的工作:https://codepen.io/mejingjard/pen/pVPmmb

如何测试:

取消注释 JS 面板上的 44 行，注释掉该行唯一发生的事情是导航到单击的元素但没有放大，此行应用 scale() 和 translate() 一起使用 matrix() 但它将视口(viewport)移动到错误的位置，我认为传递给 translate 的值可能是错误的，但我已经尝试了好几天并决定寻求帮助

Answer 1

简单地在 .selected 项上设置一个 transform:scale(X) 似乎可以解决问题:

.selected {
  transform: scale(1.7);
  position: relative;
  z-index: 1;
}

这是我使用的简化 Javascript:

function onBookClick(event) {
  event.stopPropagation();
  unSelect();
  event.target.scrollIntoView({
    behavior: "smooth",
    block: "center",
    inline: "center"
  });
  $(event.target).addClass('selected');
}

function unSelect() {
  $('.books__item').removeClass('selected')
}

$('.books').on('click', '.books__item:not(.selected)', onBookClick);
$('.books').on('click', '.selected', unSelect);

已更新 pen .