我有一个可滚动的div,但是当用户在该div内滚动时,我希望页面的其余部分停止滚动。我能够使其在Chrome,Safari,Edge等中正常工作,但无法使页面停止在Firefox中滚动。我相信它与代码的“返回假”部分有关,但我不确定。我曾尝试将mousewheel
更改为DOMMouseScroll
,但这并不能解决问题。
有人对如何使它在Firefox中运行有任何想法吗? IE 11也有问题。
下面是代码,这是一个Codepen-https://codepen.io/anon/pen/pYpqeJ
var scroller = {};
scroller.e = document.getElementById("scroll");
if (scroller.e.addEventListener) {
scroller.e.addEventListener("mousewheel", MouseWheelHandler, false);
scroller.e.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else scroller.e.attachEvent("onmousewheel", MouseWheelHandler);
function MouseWheelHandler(e) {
// cross-browser wheel delta
var e = window.event || e;
var delta = -30 * Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
var pst = $("#scroll").scrollLeft() + delta;
if (pst < 0) {
pst = 0;
} else if (pst > $(".box-wrap").width()) {
pst = $(".box-wrap").width();
}
$("#scroll").scrollLeft(pst);
return false;
}
$("#scroll").off("mousewheel").on("mousewheel", function(ev) {
var el = $(ev.currentTarget);
return ev.originalEvent.deltaY > 0
? el[0].scrollWidth - el.scrollLeft() <= el.innerWidth()
: el.scrollLeft() === 0;
});
$(window).scroll(function() {
buffer = 100 // # of pixels from bottom of scroll to fire your function. Can be 0
if ($("#scroll").prop('scrollWidth') - $("#scroll").scrollLeft() <= $("#scroll").width() + buffer ) {
document.getElementById("scroll").style["background"] = "pink";
return false;
event.preventDefault();
$('#scroll').css('overflow', 'scroll');
}
});
#wrap {
max-width: 600px;
margin: 0 auto;
}
#scroll {
width: 600px;
border: 1px solid #111;
padding: 0px;
margin: 0px;
overflow-x: scroll;
overflow-y: hidden;
}
.box-wrap{
padding: 0px;
margin: 0px;
height: 200px;
width: 2040px;
}
.box {
height: 200px;
width: 200px;
padding: 0px;
background: #123;
display: inline-block;
color: #fff;
font-size: 20px;
text-align: center;
line-height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrap">
<h1>asl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdk</h1>
<div id="scroll">
<div class="box-wrap">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
</div>
<h1>asl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdk</h1>
</div>