我有一个容器 div
,里面有一个 button
和一辆汽车 img
。滚动页面时汽车移动。
当鼠标悬停在 button
或 img
上方时,滚轮不再起作用。
我尝试添加一个灰色覆盖层 div
来阻止按钮和汽车上的 hover
。但这会阻止按钮被点击。
有没有一种方法可以使滚动在按钮或图像悬停时也起作用?
$('#home').on('scroll', function() {
var dist = $(this).scrollTop();
$('#cars').css('left', dist / 2);
});
body {
position : absolute;
height: 90%;
width: 90%;
background: #fff;
}
#overlay {
height: 1200px;
background-color: rgba(255,255,255,0.7);
z-index: 999;
position: relative;
pointer-events: none;
}
#buttons {
width: 150px;
height: 40px;
background-color: yellow;
position: fixed;
text-align: center;
z-index: 5;
cursor: pointer;
}
#home {
position: relative;
top:0px;
width: calc(100% + 25px);
overflow-y: scroll;
background-image: url('images/movie_6.jpg');
height: 400px;
background-color: #000000;
margin-top: 40px;
}
#homeinner {
height: 1800px;
overflow: hidden;
}
#cars {
height: 50px;
position: fixed;
top: 100px;
left: 0;
}
#bar {
height: 80px;
width: calc(100% + 25px);
position: absolute;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="home">
<div id="homeinner">
<button id="buttons" onclick="alert('Log in page!')">
button
</button>
<img id="cars" src="http://www.kindaholidays.com/hotel/img/travel_icon/512x512/car.png" />
<div id="overlay">
</div>
</div>
</section>
<div id="bar">
</div>
最佳答案
我想我现在意识到您的问题是当鼠标悬停在按钮或汽车图像上方时,鼠标滚轮滚动不起作用。这是因为那些元素的位置是“固定的”。我不确定这是否是错误。无论如何,您可以使用 javascript 模拟固定位置来解决此问题。
$('#home').on('scroll', function() {
var dist = $(this).scrollTop();
$("#buttons").css("top", dist);
$("#cars").css("top", dist + 100);
$('#cars').css('left', dist / 2);
});
body {
position: absolute;
height: 90%;
width: 90%;
background: #fff;
}
#overlay {
height: 1200px;
background-color: rgba(255, 255, 255, 0.7);
z-index: 999;
position: relative;
pointer-events: none;
}
#buttons {
width: 150px;
height: 40px;
background-color: yellow;
position: absolute;
text-align: center;
z-index: 5;
cursor: pointer;
}
#home {
position: relative;
top: 0px;
width: calc(100% + 25px);
overflow-y: scroll;
background-image: url('images/movie_6.jpg');
height: 400px;
background-color: #000000;
margin-top: 40px;
}
#homeinner {
height: 1800px;
overflow: hidden;
}
#cars {
height: 50px;
position: absolute;
top: 100px;
left: 0;
}
#bar {
height: 80px;
width: calc(100% + 25px);
position: absolute;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="home">
<div id="homeinner">
<button id="buttons" onclick="alert('Log in page!')">
button
</button>
<img id="cars" src="http://www.kindaholidays.com/hotel/img/travel_icon/512x512/car.png" />
</div>
</section>
<div id="bar">
</div>
关于javascript - 悬停固定元素时允许在 DIV 中滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34256461/