scrollintoview+flexbox+动态高度

krugob8w  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(462)

我真的很感激任何帮助。
我有一个两部分并排的flex容器。
右侧的部分有一列,其中包含宽度为100%的图像。
我想在单击右栏中的一个图像时隐藏左部分,并动态地将右部分拉伸到窗口的全宽。
同时,我想将刚才单击的图像滚动到窗口顶部。
我尝试了scrollintoview和animate({scrolltop:。。。但是我经常遇到图像不能一直滚动到顶部的问题。我怀疑这是因为flex box和不断变化的图像高度/宽度。我真的不想更改图像的大小。我看到的解决方案是在左栏被隐藏后更新视口中的图像位置,然后滚动到顶部
我想问题是我不太明白为什么图像现在不能滚动到顶部。
我现在拥有的是

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

});

  1. body {
  2. display: flex;
  3. }
  4. section {
  5. background: red;
  6. width: 600px;
  7. margin-left: 20px;
  8. width: 100%;
  9. }
  10. img {
  11. width: 100%;
  12. }
  13. div#current {
  14. background: yellow;
  15. }
  16. div {
  17. background: green;
  18. width: 90%;
  19. margin: 20px;
  20. padding: 20px;
  21. }
  22. <section id="left">
  23. </section>
  24. <section id="right">
  25. <div>
  26. <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
  27. </div>
  28. <div id="current">
  29. click me
  30. <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
  31. </div>
  32. <div>
  33. <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
  34. </div>
  35. </section>

这里是代码笔
https://codepen.io/malykh_kate/full/vymkzpb
非常感谢你!

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题