提问人:Anna_B 提问时间:7/25/2023 更新时间:7/25/2023 访问量:29
我如何检测是否有人尝试滚动,即使这是不可能的?
How can I detect if someone tries to scroll even if it's not possible?
问:
这是我的代码:
$(document).ready(function() {
$('.scrollable-area').on('wheel', function(e) {
var scrollLeft = $(this).scrollLeft();
var width = $(this).get(0).scrollWidth - $(this).width();
var deltaY = e.originalEvent.deltaY;
var deltaX = e.originalEvent.deltaX;
var newScrollLeft = scrollLeft + deltaY + deltaX;
if ((deltaY > 0 && newScrollLeft < width) ||
(deltaY < 0 && newScrollLeft > 0)) {
e.preventDefault();
}
if (newScrollLeft <= 0) {
$(this).scrollLeft(0);
} else if (newScrollLeft >= width) {
$(this).scrollLeft(width);
} else {
$(this).scrollLeft(newScrollLeft);
}
});
});
$('.scrollable-area').on("mousedown touchstart", function() {
$('iframe').css('pointer-events', 'all');
});
$('.scrollable-area').scroll(function() {
$('iframe').css('pointer-events', 'none');
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gallery-container {
position: relative;
width: 100%;
height: 90vh;
background-color: yellow;
overflow: hidden;
}
.scrollable-area {
width: 100%;
height: 100%;
overflow-x: auto;
}
.gallery-items {
display: flex;
min-width: 100%;
height: 100%;
}
.gallery-item {
flex: 0 0 auto;
height: 100%;
display: flex;
}
.gallery-item img {
max-width: 100%;
height: auto;
object-fit: contain;
}
.gallery-item iframe {
background-color: blue;
width: calc(100% * 1.75);
width: calc((16 / 9) * 90vh);
pointer-events: none;
}
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<div class="gallery-container">
<div class="scrollable-area">
<div class="gallery-items">
<div class="gallery-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast%2C_Dhaka%2C_Bangladesh.JPG">
</div>
<div class="gallery-item">
<iframe src="https://player.vimeo.com/video/584985260" frameborder="0" allow="fullscreen"></iframe>
</div>
<div class="gallery-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/da/Sky_landscape.jpg">
</div>
<div class="gallery-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast%2C_Dhaka%2C_Bangladesh.JPG">
</div>
</div>
</div>
</div>
如果您只是上下滚动,它会自动水平滚动。为了使它与 included 一起使用,我添加了以下逻辑:iframes
$('.scrollable-area').on("mousedown touchstart", function() {
$('iframe').css('pointer-events', 'all');
});
$('.scrollable-area').scroll(function() {
$('iframe').css('pointer-events', 'none');
});
这基本上有效,但仅限于您单击视频播放后的那一刻。然后就无法继续滚动。挑战在于检测是否有人尝试滚动,然后再次添加以使继续滚动成为可能。pointer-events: none;
我也想暂时添加一个透明层,但它不那么简单,并导致了同样的问题。
我将不胜感激!
答: 暂无答案
评论