时间戳

首页 > 解决方案 > Scrollintoview + flexbox + 动态高度

javascript - Scrollintoview + flexbox + 动态高度

问题描述

我真的很感激任何帮助。

我有一个并排的两个部分的弹性容器。

右边的部分有一列宽度为 100% 的图像。

我想在单击右列中的一个图像时隐藏左侧部分，并将右侧部分动态拉伸到窗口的整个宽度。

同时，我想将刚刚单击的图像滚动到窗口顶部。

我已经尝试过 scrollIntoView 和 animate({scrollTop:... 但我经常遇到图像无法一直滚动到顶部的问题。我怀疑这是因为 flex-box 和不断变化的图像高度/宽度。我真的不想更改图像的大小。我看到的解决方案是在隐藏左列然后滚动到顶部后更新视口中的图像位置的一种方式。' '

我想问题是我不太明白为什么图像目前无法将属性滚动到顶部。

我现在拥有的是

$(document).ready(function(){
$('#current').on('click', function(){
$( "#left" ).toggle( "fast" );document.querySelector('div#current').scrollIntoView({behavior: "smooth", block: "start", inline: "start"});
});

});

body {
  display: flex;
}
section {
  background: red;
  width: 600px;
  margin-left: 20px;
  width: 100%;
}

img {
  width: 100%;
}

div#current {
  background: yellow;
}

div {
  background: green;
  width: 90%;
  margin: 20px;
  padding: 20px;
}
<section id="left">
</section>
<section id="right">
  <div>
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
    </div>
   <div id="current">
     click me
      <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
    </div>
   <div>
      <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
    </div>
</section>

CODEPEN 这里

https://codepen.io/malykh_kate/full/vYmKZpb

非常感谢！

标签： javascripthtmljqueryflexboxjs-scrollintoview

解决方案

推荐阅读