我如何检测是否有人尝试滚动,即使这是不可能的?

How can I detect if someone tries to scroll even if it's not possible?

提问人:Anna_B 提问时间:7/25/2023 更新时间:7/25/2023 访问量:29

问:

这是我的代码:

$(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;

我也想暂时添加一个透明层,但它不那么简单,并导致了同样的问题。

我将不胜感激!

javascript jquery iframe

评论

0赞 CBroe 7/25/2023
“挑战在于检测是否有人尝试滚动”——但只要 iframe 有焦点,你就不能再做任何事情了。我认为你最好的办法是根本不让用户与iframe交互 - 而是使用JavaScript API来播放/暂停视频。
0赞 Anna_B 7/25/2023
@CBroe 但是声音按钮等也不再起作用了。难道没有其他解决方案可以修复滚动行为吗?

答: 暂无答案