文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >有JS滚动效果的问题

问有JS滚动效果的问题
EN

Stack Overflow用户
提问于 2018-05-17 20:15:16
回答 1查看 55关注 0票数 1

我希望有人能帮我解决我遇到的问题。不幸的是，我在JS方面没有很好的经验，所以我遇到了一些麻烦。

我有一个网站，有一个完整的页面背景图像。当用户滚动时，背景图像会发生变化。不久前，我从Stack溢出的另一篇文章中得到了这个解决方案，但我似乎找不到那篇文章来拯救我的生命，否则我就会在这里发布这个帖子。

在任何情况下，下面都有一个代码片段。我现在面临的三个问题是：

  1. 目前，当它到达最后一个图像时，它会停止，除非用户回滚。我想要做的是，当这个人到达最后一个图像时，我希望它从一开始就重新启动，这样它就会在用户不断向下滚动的时候循环起来。
  2. 在Firefox上，当它到达最后一个图像时，用户甚至不能向上滚动回到以前的图像。到了最后一个就停下来了。
  3. 它在iPhone上不起作用。显然，我知道这是因为iPhone是touch，而这个JS正在寻找鼠标轮，但是有什么特定的JS代码可以用于目标触摸吗？

提前感谢您的帮助！

在Windows上，它能识别出一个完整的滚动卷，这是一个伟大的滚动，但在Mac上，一个完整的滚动将在一次循环所有的图像。这只是Mac的事因为它很烦人吗？

​

代码语言：javascript
运行
复制
$(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;
          });
        }
      }
    }
  });
});
代码语言：javascript
运行
复制
.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;
}
代码语言：javascript
运行
复制
<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>

​

javascript
jquery
html
css
EN

回答 1

Stack Overflow用户

发布于 2018-05-17 21:55:01

你可以用模数运算。下面是一个示例：

​

代码语言：javascript
运行
复制
$(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');
  });
});
代码语言：javascript
运行
复制
.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;
}
代码语言：javascript
运行
复制
<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变为屏幕大小的3x时触发第一个if。

实际上，您正在从透明div (因此是隐藏div)中滚动滚动条。

代码语言：javascript
运行
复制
$(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());
    
    }
    
  });
});
代码语言：javascript
运行
复制
.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;
}
代码语言：javascript
运行
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/50399858

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档