当我只想滚动一个部分时整个页面滚动

Question

我正在尝试创建一个部分，其中只有一个 div 会滚动而不是整个页面

例如，如果用户将鼠标悬停在产品图片部分，那么产品详细信息部分将保持不变

我不想仅在产品部分显示 hover 时才向用户显示所有产品图片

就像图像只在 div 上滚动

代码笔： https://codepen.io/taruunn/pen/MWONvdr

 .productWrapper{ display:flex; max-width:1440px; margin:0 auto }.product_images{ display:flex; flex-direction:column; width: 100%; flex: 1 1 50%; }.product_images img{ margin-top:25px }.product_details{ padding:0 25px; width: 100%; flex: 1 1 40%; }.product_images:hover +.product_details.product_sticky { position: sticky; top: 0; }

 <div class="productWrapper"> <div class="product_images"> <img src="https://via.placeholder.com/400x600?text=product-image"> <img src="https://via.placeholder.com/400x600?text=product-image"> <img src="https://via.placeholder.com/400x600?text=product-image"> <img src="https://via.placeholder.com/400x600?text=product-image"> <img src="https://via.placeholder.com/400x600?text=product-image"> <img src="https://via.placeholder.com/600x900?text=product-image"> </div> <div class="product_details"> <div class="product_sticky"> <h2>product title </h2> <h4>Price</h4> <p>Product description Product descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct description </p> </div> </div> </div>

Answer 1

这件事情将由JavaScript完成。但是如果你不想使用JS那么这件事情你将通过关键帧来完成。

 .productWrapper{ display:flex; flex-wrap:wrap; max-width:1440px; margin:0 auto }.product_images{ display:flex; flex-direction:column; width: 100%; flex: 1 1 50%; position: relative; overflow:hidden; height:450px; }.product_images img{ margin-top:25px; Position:absolute; height:100%; width:100%; object-fit:cover; }.product_images img:nth-child(1){ top:0; }.product_images img:nth-child(2), .product_images img:nth-child(3), .product_images img:nth-child(4), .product_images img:nth-child(5), .product_images img:nth-child(6){ top: 200%; }.product_images:hover img{ animation-duration: .5s; animation-fill-mode: forwards; animation-name: mymove; }.product_images img:nth-child(2) { animation-delay: 2s; animation-duration: 0s; z-index: 1; }.product_images img:nth-child(3) { animation-delay: 3s; z-index: 2; }.product_images img:nth-child(4) { animation-delay: 6s; z-index: 4; }.product_images img:nth-child(5) { animation-delay: 9s; z-index: 5; }.product_images img:nth-child(6) { animation-delay: 12s; z-index: 6; }.product_details{ padding:0 25px; width: 100%; flex: 1 1 40%; }.product_images:hover +.product_details.product_sticky { position: sticky; top: 0; } @keyframes mymove{ 0% { top: 200%; } 100% { top: 0; } }

 <div class="productWrapper"> <div class="product_images"> <img src="https://via.placeholder.com/400x600?text=product-image"> <img src="https://via.placeholder.com/400x600?text=product-image"> <img src="https://via.placeholder.com/400x600?text=product-image"> <img src="https://via.placeholder.com/400x600?text=product-image"> <img src="https://via.placeholder.com/400x600?text=product-image"> <img src="https://via.placeholder.com/600x900?text=product-image"> </div> <div class="product_details"> <div class="product_sticky"> <h2>product title </h2> <h4>Price</h4> <p>Product description Product descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct description </p> </div> </div> </div>