懸停固定元素時允許在DIV中滾動

Question

我有一個容器div其中有一個button和一個car 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>