0
javascript我有onscroll事件，根據window.pageYOffset移動div元素。在CSS中我有一個：懸停，適用transform：scale（）;javascript：懸停效果不再有效當javascript onscroll事件被觸發時
當頁面加載時，CSS效果起作用。但是，只要開始滾動並應用onscroll事件，移動的div就不再響應懸停效果。沒有滾動事件的div仍然具有CSS效果。任何想法是什麼導致衝突？ https://jsfiddle.net/kshatriiya/b2jxg3ep/1/
<div id="container">
<div class="box" id="one"></div>
<div class="box" id="two"></div>
<div class="box" id="three"></div>
<div class="box" id="four"></div>
<div class="box" id="five"></div>
</div>
<div id="scroll-container">
<div class="box move" data-offset="12" id="six"></div>
<div class="box move" data-offset="14" id="seven"></div>
<div class="box move" data-offset="16" id="eight"></div>
<div class="box move" data-offset="18" id="nine"></div>
<div class="box move" data-offset="20" id="ten"></div>
</div>
JS
var boxes = document.getElementsByClassName("box");
var movingBoxes = document.getElementsByClassName("move");
var boxArray = [];
(function() {
for (var i = 0; i < boxes.length; i++) {
var r = Math.floor((Math.random() * 254) + 1);
boxes[i].style.background = "rgba(" + r + "," + i*30 + "," + i*45 + ", 1)";
}
})();
var boxItem = function(el, speed) {
this.el = el;
this.speed = speed;
this.startOffset = this.speed*10;
};
boxItem.prototype.update = function(Yoff) {
var spd = (Yoff)/(this.speed/(this.startOffset/10));
var distanceRemain = this.startOffset-spd;
if (distanceRemain < 0) {distanceRemain = 0};
this.el.style.transform = "translateY(" + distanceRemain + "px)";
}
function prepareArrays() {
for (i = 0; i < movingBoxes.length; i++) {
boxArray.push(new boxItem(movingBoxes[i], movingBoxes[i].getAttribute("data-offset")));
};
}
prepareArrays();
window.onscroll = function() {
var Yoffset = this.pageYOffset;
boxArray.forEach(function(el){
el.update(Yoffset);
});
}
CSS
#container {
width: 100vw;
height: 200px;
display: flex;
flex-diretion: row;
}
.box {
margin: 0;
padding: 0;
width: 20%;
height: 100px;
-webkit-transition: width 1s ease-out, transform 3s ease;
-moz-transition: width 1s ease-out, transform 3s ease;
-ms-transition: width 1s ease-out, transform 3s ease;
-o-transition: width 1s ease-out, transform 3s ease;
transition: width 1s ease-out, transform 3s ease;
background: red;
}
.box:hover {
transform: scale(1.1, 1.1);
}
#scroll-container {
width: 100%;
height: 1000px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-content: flex-start;
}