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

Question

我有一个容器 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>

Answer 1

我想我现在意识到您的问题是当鼠标悬停在按钮或汽车图像上方时，鼠标滚轮滚动不起作用。这是因为那些元素的位置是“固定的”。我不确定这是否是错误。无论如何，您可以使用 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>