时间戳

首页 > 解决方案 > JS滚动效果有问题

javascript - JS滚动效果有问题

问题描述

我希望有人可以帮助我解决我遇到的问题。不幸的是，我对 JS 不是很有经验，所以我遇到了一些麻烦。

我有一个具有整页背景图片的网站。当用户滚动时，背景图像会发生变化。不久前，我从 Stack Overflow 上的另一篇文章中得到了这个解决方案，但我似乎无法在任何地方找到该帖子来挽救我的生命，否则我将在此发布。

无论如何，下面有一个代码片段。我遇到的三个问题是：

  1. 目前，当它到达最后一张图像时，它会停止，除非用户向上滚动。我想做的是当这个人到达最后一张图片时，我希望它从头开始重新启动，这样它就会在用户不断向下滚动时循环播放。
  2. 在 Firefox 上，当它到达最后一张图片时，用户甚至无法向上滚动以返回到上一张图片。它只是到达最后一个并停止，期间。
  3. 它不适用于 iPhone。显然，我知道那是因为 iPhone 是触控的，而这个 JS 正在寻找鼠标滚轮，但是我可以使用特定的 JS 代码来定位触控吗？

非常感谢您的帮助！

PS 在 Windows 上，它会将全轮滚动识别为一个滚动，这很棒，但在 Mac 上，全滚动将一次循环浏览所有图像。那只是Mac的东西，因为它很烦人吗？

$(document).ready(function() {
  var index = 1;
  var maxIndex = $('.content').length;
  var endAnim = true;
  $('body').on('mousewheel DOMMouseScroll', function(e) {
    if (endAnim) {
      if (e.originalEvent.wheelDelta / 90 > 0) {
        if (index > 1) {
          endAnim = false;
          index--;
          $('.content-' + (index)).addClass('main-content').fadeIn(500);
          $('.content-' + (index + 1)).fadeOut(500, function() {
            $(this).removeClass('main-content');
            endAnim = true;
          });
        }
      } else {
        if (index < maxIndex) {
          endAnim = false;
          index++;
          $('.content-' + (index)).addClass('main-content').fadeIn(500);
          $('.content-' + (index - 1)).fadeOut(500, function() {
            $(this).removeClass('main-content');
            endAnim = true;
          });
        }
      }
    }
  });
});
.main-content {
	top: 0 !important;
	z-index: 100 !important;
}
.pageContainer {
	width: 100%;
	height: 100%;
	overflow-y: hidden;
	background: white;
}
.content {
  position: fixed;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: flex;
  align-items: center;
  text-align: center;
}
.content-1 {
	background-image: url('https://preview.ibb.co/f88WDy/test_image_1.jpg');
	background-size: cover;
}
.content-2 {
	background-image: url('https://preview.ibb.co/fbVNLd/test_image_2.jpg');
	background-size: cover;
}
.content-3 {
	background-image: url('https://preview.ibb.co/i79Gfd/test_image_3.jpg');
	background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageContainer">
  <div class="content content-1 main-content">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Lorem Ipsum One</h1>
        </div>
      </div>
    </div>
  </div>
  <div class="content content-2">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Lorem Ipsum Two</h1>
        </div>
      </div>
    </div>
  </div>
  <div class="content content-3">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Lorem Ipsum Three</h1>
        </div>
      </div>
    </div>
  </div>
</div>

标签： javascriptjqueryhtmlcss

解决方案

你可以使用模运算。这是一个例子：

$(document).ready(function() {
  var index = 1;
  $('body').on('mousewheel DOMMouseScroll', function(e) {
    $('.content-' + index).removeClass('main-content');
    index = index%3 + 1;
    $('.content-' + index).addClass('main-content');
  });
});
.main-content {
	top: 0 !important;
	z-index: 100 !important;
}
.pageContainer {
	width: 100%;
	height: 100%;
	overflow-y: hidden;
	background: white;
}
.content {
  position: fixed;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: flex;
  align-items: center;
  text-align: center;
}
.content-1 {
	background-image: url('https://preview.ibb.co/f88WDy/test_image_1.jpg');
	background-size: cover;
}
.content-2 {
	background-image: url('https://preview.ibb.co/fbVNLd/test_image_2.jpg');
	background-size: cover;
}
.content-3 {
	background-image: url('https://preview.ibb.co/i79Gfd/test_image_3.jpg');
	background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageContainer">
  <div class="content content-1 main-content">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Lorem Ipsum One</h1>
        </div>
      </div>
    </div>
  </div>
  <div class="content content-2">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Lorem Ipsum Two</h1>
        </div>
      </div>
    </div>
  </div>
  <div class="content content-3">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Lorem Ipsum Three</h1>
        </div>
      </div>
    </div>
  </div>
</div>

扩展答案 我现在在大学，所以稍后我将对此进行全面解释。我创建了一个 hiddenScroll ，其中包含一个大小为屏幕大小 3 倍的元素。然后我将 hiddenScroll 的滚动位置更改为屏幕大小的 1 倍，以便当 scrollTop 变为 0 时，滚动事件触发第二个 if 或者当 scrollTop 变为屏幕大小的 3 倍时触发第一个 if。

您实际上是从透明 div（因此隐藏 div）滚动滚动条。 

$(document).ready(function() {
  var index = 1;
  $(".hiddenScroll").scrollTop($( document ).height())
  $('body').on('mousewheel DOMMouseScroll', function(e) {
    
    var hiddenScrollbar = $(".hiddenScroll");
    if(hiddenScrollbar.scrollTop() == 2*$( document ).height()){
    
      $('.content-' + index).removeClass('main-content');
      index = index%3 + 1;
      $('.content-' + index).addClass('main-content');
      hiddenScrollbar.scrollTop($( document ).height());
      
    }else if($(".hiddenScroll").scrollTop() == 0){
    
      $('.content-' + index).removeClass('main-content');
      index = index == 1 ? 3 : index - 1;
      $('.content-' + index).addClass('main-content');
      hiddenScrollbar.scrollTop($( document ).height());
    
    }
    
  });
});
.main-content {
	top: 0 !important;
	z-index: 100 !important;
}
.pageContainer {
	width: 100%;
	height: 100%;
	overflow-y: hidden;
	background: white;
}
.content {
  position: fixed;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: flex;
  align-items: center;
  text-align: center;
}
.content-1 {
	background-image: url('https://preview.ibb.co/f88WDy/test_image_1.jpg');
	background-size: cover;
}
.content-2 {
	background-image: url('https://preview.ibb.co/fbVNLd/test_image_2.jpg');
	background-size: cover;
}
.content-3 {
	background-image: url('https://preview.ibb.co/i79Gfd/test_image_3.jpg');
	background-size: cover;
}
.hiddenScroll {
	width: 100%;
  height: 100%;
  overflow-y: scroll;
  position: fixed;
  display: block;
  filter: opacity(0);
  z-index: 101;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageContainer">
  <div class="content content-1 main-content">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Lorem Ipsum One</h1>
        </div>
      </div>
    </div>
  </div>
  <div class="content content-2">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Lorem Ipsum Two</h1>
        </div>
      </div>
    </div>
  </div>
  <div class="content content-3">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Lorem Ipsum Three</h1>
        </div>
      </div>
    </div>
  </div>
  <div class="hiddenScroll">
    <div style="height: 300vh;"></div>
  </div>
</div>

推荐阅读