在悬停固定元素时允许在DIV中滚动

Question

我有一个容器div，里面有button和一辆汽车img。当页面滚动时，汽车会移动。

当鼠标悬停在button或img的顶部时，滚轮不再有效。

我尝试添加灰色叠加层div来阻止按钮和汽车上的hover。但这样可以防止点击该按钮。

即使按钮或图像悬停，有没有办法让滚动工作？

＆＃13;

＆＃13;

$('#home').on('scroll', function() {

	var dist = $(this).scrollTop();

	$('#cars').css('left', dist / 2);
  
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我想我现在意识到你的问题是，当鼠标位于按钮或汽车图像的顶部时，鼠标滚轮不起作用。这是因为这些元素的位置是“固定的”。我不确定这是不是一个bug。无论如何，你可以用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>