📌  相关文章
📜  如何创建滚动指示器 (1)

📅  最后修改于: 2023-12-03 14:52:08.556000             🧑  作者: Mango

如何创建滚动指示器

滚动指示器通常用于显示页面中的某一部分正在被显示，以及当前显示的是哪一部分。在移动应用程序和手机网站中经常使用，因为它们可以提高用户体验并提供更好的导航。

下面是如何创建一个简单的滚动指示器的步骤：

  1. 首先，需要选择一个合适的图标来表示滚动指示器。可以使用现有的图标库，也可以使用SVG等图形工具来创建自定义的图标。这里我们使用Font Awesome中提供的fa-circle字体图标作为示例。

  2. 在HTML中创建一个div来包含滚动指示器。可以给这个div添加一个类名，以便在样式表中选择并对其应用样式。

<div class="scroll-indicator"></div>
  1. 在CSS中对滚动指示器的样式进行设置。以scroll-indicator类为例，样式实现如下：
.scroll-indicator {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  z-index: 9999; /* 确保指示器在所有其他元素之上 */
}

.scroll-indicator span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: gray;
  margin: 0 5px;
  border-radius: 50%;
  opacity: 0.5;
}

.scroll-indicator span.active {
  opacity: 1;
}

在样式中，我们对滚动指示器进行了以下设置：

  • 将指示器固定在底部，并设置全宽度。
  • 设置指示器高度为20px。
  • 将指示器的层级设置为最高，以确保它位于所有其他元素之上。
  • 对于每个指示器图标（即圆圈），我们设置了宽度、高度、背景颜色、外边距等样式。
  • 对于当前正在查看的屏幕所表示的图标，我们增加了一个active类，在该类中设置样式。在这种情况下，我们将不透明度设置为1，以区别于其他图标。
  1. 在JavaScript中，使用滚动事件来设置指示器的活动状态。判断当前屏幕是否达到了指定的区域，如果达到了则将相应的指示器设置为活动状态（即增加active类）。
var sections = document.querySelectorAll('section');
var indicator = document.querySelector('.scroll-indicator');

window.addEventListener('scroll', function() {
  var currentSection = '';
  
  // 可见区域的底部坐标
  var scrollPosition = window.innerHeight + window.pageYOffset;
  
  // 获取当前可见区域所在的section
  for (var i = 0; i < sections.length; i++) {
    var section = sections[i];
    var sectionBottom = section.offsetTop + section.offsetHeight;
    if (scrollPosition >= section.offsetTop && scrollPosition < sectionBottom) {
      currentSection = section.getAttribute('id');
    }
  }
  
  // 设置相应的指示器为活动状态
  var indicators = indicator.querySelectorAll('span');
  for (var i = 0; i < indicators.length; i++) {
    var span = indicators[i];
    var sectionId = span.getAttribute('data-target');
    span.classList.remove('active');
    if (currentSection === sectionId) {
      span.classList.add('active');
    }
  }
});
  1. 在HTML中，将每个需要显示指示器的屏幕分配到一个section元素中，并为每个元素添加一个ID属性，以便JavaScript能够正确找到相应的元素。
<body>
  <section id="section1">内容1</section>
  <section id="section2">内容2</section>
  <section id="section3">内容3</section>

  <div class="scroll-indicator">
    <span data-target="section1"><i class="fa fa-circle"></i></span>
    <span data-target="section2"><i class="fa fa-circle"></i></span>
    <span data-target="section3"><i class="fa fa-circle"></i></span>
  </div> 
</body>

这样，就完成了滚动指示器的创建。

基本思路

滚动指示器的创建基本思路是，在页面中添加一个指示器区块，其中包含多个图标，每个图标代表文档中的一个屏幕。在滚动文档时，通过JavaScript来监测当前屏幕的位置，如果可见区域落在某个屏幕，并且此时该屏幕对应的图标未被激活，那么就将该图标设置为激活状态。

代码片段：

<div class="scroll-indicator">
  <span data-target="section1"><i class="fa fa-circle"></i></span>
  <span data-target="section2"><i class="fa fa-circle"></i></span>
  <span data-target="section3"><i class="fa fa-circle"></i></span>
</div>

.scroll-indicator {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  z-index: 9999; /* 确保指示器在所有其他元素之上 */
}

.scroll-indicator span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: gray;
  margin: 0 5px;
  border-radius: 50%;
  opacity: 0.5;
}

.scroll-indicator span.active {
  opacity: 1;
}

var sections = document.querySelectorAll('section');
var indicator = document.querySelector('.scroll-indicator');

window.addEventListener('scroll', function() {
  var currentSection = '';
  
  // 可见区域的底部坐标
  var scrollPosition = window.innerHeight + window.pageYOffset;
  
  // 获取当前可见区域所在的section
  for (var i = 0; i < sections.length; i++) {
    var section = sections[i];
    var sectionBottom = section.offsetTop + section.offsetHeight;
    if (scrollPosition >= section.offsetTop && scrollPosition < sectionBottom) {
      currentSection = section.getAttribute('id');
    }
  }
  
  // 设置相应的指示器为活动状态
  var indicators = indicator.querySelectorAll('span');
  for (var i = 0; i < indicators.length; i++) {
    var span = indicators[i];
    var sectionId = span.getAttribute('data-target');
    span.classList.remove('active');
    if (currentSection === sectionId) {
      span.classList.add('active');
    }
  }
});