调整浏览器大小时保持具有变换属性的元素的位置
[英]Keeping the position of an element with transform property when resizing the browser
问题描述
我正在尝试创建一个滑块并且一切正常，但是当我调整浏览器大小时，元素的位置也在调整大小，这是因为当我单击滑块的箭头时，我对每个元素应用了一个transform: translateX() .
如果我不调整浏览器的大小，滑块会像它应该的那样工作。有没有办法在调整浏览器大小时停止更改元素的位置并阻止它们移动？
当您运行代码时，将其放在整页中，然后单击箭头调整窗口大小以查看我在说什么。
我找不到解决方案，因此非常感谢您的帮助。您可以在下面找到代码。
const rightArrow = document.querySelector('.right'); const leftArrow = document.querySelector('.left'); const movieTitles = document.querySelectorAll('.movie-title'); const movieContainer = document.querySelector('.movie-container'); const arrowRight = document.querySelector('.fa-chevron-right'); let movieCounter = 0; let rightStop = 0; const carouselSlide = function() { if(this.classList.contains('left') && allSlideWidth === 0) return; let containerWidth; let paddingLeft; let paddingRight; movieContainerChilds = [...movieContainer.children]; containerWidth = +window .getComputedStyle(movieContainer) .getPropertyValue('width') .slice(0, -2); paddingLeft = +window. getComputedStyle(movieContainer) .getPropertyValue('padding-left') .slice(0, -2); paddingRight = +window .getComputedStyle(movieContainer) .getPropertyValue('padding-right') .slice(0, -2); let movieTitleWidth = Number(movieContainerChilds[0].getBoundingClientRect().width) + 4; rightStop = Math.round((+containerWidth - (+paddingLeft + +paddingRight)) / movieTitleWidth); if(this.classList.contains('right')) { allSlideWidth += Math.round(+containerWidth - (+paddingLeft + +paddingRight)); movieCounter += rightStop; } if(this.classList.contains('left')) { allSlideWidth -= Math.round(+containerWidth - (+paddingLeft + +paddingRight)); movieCounter -= rightStop; }; movieContainerChilds.forEach((movie) => { if(movieContainerChilds.length - rightStop <= movieCounter + rightStop) { movie.style.transform = `translateX(-${allSlideWidth + (Math.round(movieTitleWidth) * (movieContainerChilds.length - (movieCounter + rightStop)))}px`; } else {movie.style.transform = `translateX(-${allSlideWidth}px)`; } }) movieContainer.addEventListener('transitionend', function() { allSlideWidth > 0 ? leftArrow.style.display = 'flex' : leftArrow.style.display = 'none'; movieContainerChilds.length - rightStop <= movieCounter + rightStop ? rightArrow.style.display = 'none' : rightArrow.style.display = 'flex'; rightArrow.addEventListener('click', carouselSlide); leftArrow.addEventListener('click', carouselSlide); }) movieContainer.addEventListener('transitionstart', function() { rightArrow.removeEventListener('click', carouselSlide); leftArrow.removeEventListener('click', carouselSlide); }) } let allSlideWidth = 0; rightArrow.addEventListener('click', carouselSlide); leftArrow.addEventListener('click', carouselSlide);
* { padding: 0; margin: 0; box-sizing: border-box; } body { margin: 0; background: #161414; overflow: hidden; } section { overflow-x: visible; width: 100%; position: relative; } .movie-container { padding: 0 60px; margin-top: 20px; white-space: nowrap; transition: .7s ease all; } .movie-container::-webkit-scrollbar { display: none; } .movie-title { display: inline-block; width: calc(16.66666% - 4px); height: 250px; padding: 0; margin: 0; transition: .7s ease all; margin-bottom: -10px; } .movie-title:hover { transform: scale(1.5); } .movie-title img { display: inline-block; width: 100%; height: 100%; border-radius: 5px; } .left, .right { position: absolute; background: rgb(0, 0, 0, .3); height: 100%; width: 60px; top: 0; font-size: 2rem; display: flex; justify-content: center; align-items: center; color: white; cursor: pointer; } .left { left: -4px; border-radius: 0 5px 5px 0; height: 100%; display: none; } .right { right: 0.1px; border-radius: 5px 0 0 5px; height: 100%; } .right:hover, .left:hover { background: rgb(0, 0, 0, .65); } @media (max-width: 1400px) { .movie-title { width: calc(20% - 4px); } } @media (max-width: 1000px) { .movie-title { width: calc(25% - 4px); } } @media (max-width: 800px) { .movie-container { padding: 0 20px; overflow-x: scroll; } .movie-title { width: 32.88888666%; margin-right: 4px; } .left, .right { display: none; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous"> </head> <body> </div> <section> <div class="movie-container"> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> <div class="movie-title"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> </div> </div> <div class="left"><i class="fas fa-chevron-left"></i></div> <div class="right"><i class="fas fa-chevron-right"></i></div> </section> </body> </html>
1 个解决方案
解决方案1
0 2021-07-01 01:47:18
您正在使用两个转换：
.movie-title: hover {
transform: scale (1.5);
}
添加时，前一个折叠
translateX (0px);
transform: translateX(0px) scale(1.5); <---没错
错了，因为一个删除了另一个
transform: scale(1.5);
transform: translateX(0px);
您可以简单地添加一个 div：
HTML
.test:hover { transform: scale(1.5); }
<div class="movie-title"> <div class="test"> <img src="https://images-na.ssl-images-amazon.com/images/I/71l9Q9W4oPL._AC_SY741_.jpg" alt=""> <div> </div>
有效，祝你好运
旋转变换后调整div大小时如何保留左上角位置？
[英]How to preserve top left position when resizing div after rotation transform?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.