<div class="container"> <div class="fixed-content left-content"> <img class="image" src="./images_524/ad-l.png" alt="左侧图片" /> </div> <img class="image0" src="./images_524/box.png" alt="中间图片" /> <div class="fixed-content right-content"> <img class="image" src="./images_524/ad-r.png" alt="右侧图片" /> </div> </div>修改这段代码使得中间图片向下滚动的时候左右图片固定

您可以将左右两侧的图片放到一个固定的容器中，然后使用CSS的position属性将其固定在页面上。下面是修改后的代码：

<div class="container">       
  <div class="fixed-content left-content">         
    <img class="image" src="./images_524/ad-l.png" alt="左侧图片" />       
  </div>       
  <div class="scrollable-content">
    <img class="image0" src="./images_524/box.png" alt="中间图片" />       
  </div>       
  <div class="fixed-content right-content">         
    <img class="image" src="./images_524/ad-r.png" alt="右侧图片" />       
  </div>     
</div>

<style>
  .container {
    position: relative;
  }
  .fixed-content {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
  }
  .left-content {
    left: 0;
  }
  .right-content {
    right: 0;
  }
  .scrollable-content {
    height: 100vh;
    overflow-y: scroll;
    scroll-behavior: smooth;
  }
</style>

在上面的代码中，我们将左右两侧的图片放到了一个固定的容器中，并使用了CSS的position属性将其固定在页面上。中间的图片则被放到了一个可滚动的容器中，并通过设置overflow-y属性为scroll来实现纵向滚动。由于我们需要让中间的图片向下滚动，我们还设置了scroll-behavior属性为smooth，这样滚动效果会更加平滑。