http://dongnanal.com/static/index/zh/js/full-page.js

1/*
2 * @Author       : fallen_zero
3 * @Date         : 2023-09-06 08:34:18
4 * @LastEditors  : fallen_zero
5 * @LastEditTime : 2023-09-08 15:18:04
6 * @FilePath     : /Front-End-Yongjie-Website-Native-Static/js/full-page.js
7 * @FileName     :
8 */
9
10const items = document.querySelectorAll('.page');
11
12const btnListEl = document.querySelector('.btn-list');
13const btnItems = document.querySelectorAll('.btn-item:not([class*=disabled])');
14
15const contentEl = document.querySelector('.content');
16
17const scrollbarEl = document.querySelector('.scrollbar');
18const scrollbarDragEl = document.querySelector('.scrollbar-drag');
19
20let currentIndex = 0; // 当前滚动到的index
21let flag = false;
22
23// 初始化滚动条高度
24const scHeight =
25  (window.innerHeight / contentEl.offsetHeight) * scrollbarEl.offsetHeight;
26scrollbarDragEl.style.height = scHeight + 'px';
27
28// 更改滚动条位置
29function changeScroll(index) {
30  const num =
31    scHeight * index + scrollbarDragEl.offsetHeight >= scrollbarEl.offsetHeight
32      ? scrollbarEl.offsetHeight - scrollbarDragEl.offsetHeight
33      : scHeight * index;
34
35  scrollbarDragEl.style.top = `${num}px`;
36}
37
38// 根据滚动条的top值计算出页面应该滚动的距离
39function calcPagePos(scrollbarDragTop) {
40  const marginTop =
41    (scrollbarDragTop / scrollbarEl.offsetHeight) * contentEl.offsetHeight;
42  contentEl.style.marginTop = `${-marginTop}px`;
43
44  // 根据marginTop算出currentIndex
45  const num = marginTop % window.innerHeight;
46  if (num > window.innerHeight / 2) {
47    // 超出屏幕一半就向上取整, 不许超出最大值
48    currentIndex = Math.ceil(marginTop / window.innerHeight);
49    currentIndex =
50      currentIndex > btnItems.length - 1 ? btnItems.length - 1 : currentIndex;
51  } else {
52    // 否则就向下取整
53    currentIndex = Math.floor(marginTop / window.innerHeight);
54  }
55  changeActive(currentIndex, true);
56}
57
58// 更改容器的marginTop即页面滚动
59function changeItem(index) {
60  // 防止超出, 比如最后一个item只有半屏的高度, 那就不能直接滚动一整屏, 只能滚动到只剩下一屏 容器高度 - 数量 * 整屏 是否小于等于一整屏, 是就是滚动到只剩下一屏
61  const num =
62    contentEl.offsetHeight - index * window.innerHeight <= window.innerHeight
63      ? contentEl.offsetHeight - window.innerHeight
64      : index * window.innerHeight;
65
66  contentEl.style.marginTop = `${-num}px`;
67}
68
69// 更改按钮活跃状态
70function changeActive(index, flag) {
71  currentIndex = index;
72  // 考虑按钮数量与item数量不一致的情况, 比如下面还有公司信息, 但不计入按钮的数量
73  if (currentIndex <= items.length - 1) {
74    btnItems.forEach((o) => (o.className = 'btn-item'));
75    btnItems[currentIndex].className = 'btn-item active';
76  }
77
78  // 设置按钮隐藏以及显示
79  if (currentIndex > btnItems.length - 1 || currentIndex === 0) {
80    btnListEl.className = 'btn-list white';
81    $('.go-top').addClass('hidden');
82  } else {
83    btnListEl.className = 'btn-list';
84    $('.go-top').removeClass('hidden');
85  }
86
87  items.forEach((o) => (o.className = o.className.replace(' animated', '')));
88  items[currentIndex].className = `${items[currentIndex].className} animated`;
89
90  if (!flag) {
91    changeItem(index);
92  }
93
94  if (countToList[currentIndex + 1]) {
95    setTimeout(() => {

96      countToList[currentIndex + 1].forEach((el) => {
97        el.reset();
98        el.start();
99      });
100    }, 800);
101  }
102
103
104}
105
106// 按钮添加点击事件
107btnItems.forEach((dom, index) => {
108  dom.onclick = function () {
109    currentIndex = index;
110    changeActive(currentIndex);
111    changeScroll(currentIndex);
112  };
113});
114
115// 事件
116
117let timer = null;
118
119// 容器执行完东好
120contentEl.addEventListener('transitionend', function (e) {
121  if (e.propertyName === 'margin-top' && e.target.className === 'content') {
122    if (timer) {
123      clearTimeout(timer);
124      timer = null;
125    }
126    timer = setTimeout(() => {
127      flag = false;
128    }, 200);
129  }
130});
131
132// 鼠标滚轮事件
133document.addEventListener('wheel', function (e) {
134  // 防止重复触发
135  if (flag) return;
136
137  let _currentIndex = currentIndex;
138
139  // 向下
140  if (e.deltaY > 0) {
141    currentIndex =
142      currentIndex >= items.length - 1 ? items.length - 1 : currentIndex + 1;
143  } else {
144    currentIndex = currentIndex <= 0 ? 0 : currentIndex - 1;
145  }
146
147  // 只有滚动了才需要锁住不让用户一直触发
148  if (currentIndex !== _currentIndex) {
149    flag = true;
150    changeActive(currentIndex);
151    changeScroll(currentIndex);
152  }
153});
154
155let touchStartY = 0;
156
157// 鼠标滚轮事件
158document.addEventListener('touchstart', function (e) {
159  touchStartY = e.changedTouches[0].pageY;
160});
161
162// 鼠标滚轮事件
163document.addEventListener('touchmove', function (e) {
164  // 防止重复触发
165  if (flag) return;
166
167  let _currentIndex = currentIndex;
168  const deltaY = touchStartY - e.changedTouches[0].pageY;
169  // 向下
170  if (deltaY > 0) {
171    currentIndex =
172      currentIndex >= items.length - 1 ? items.length - 1 : currentIndex + 1;
173  } else {
174    currentIndex = currentIndex <= 0 ? 0 : currentIndex - 1;
175  }
176
177  // 只有滚动了才需要锁住不让用户一直触发
178  if (currentIndex !== _currentIndex) {
179    flag = true;
180  }
181
182  changeActive(currentIndex);
183  changeScroll(currentIndex);
184});
185
186// 滚动条
187scrollbarEl.addEventListener('mousedown', function (e) {
188  e.preventDefault();
189
190  if (e.target !== scrollbarDragEl) {
191    // 更新滚动条位置
192    let pos = e.clientY - scrollbarDragEl.offsetHeight / 2;
193    if (pos < 0) {
194      pos = 0;
195    } else if (pos + scrollbarDragEl.offsetHeight > scrollbarEl.offsetHeight) {
196      pos = scrollbarEl.offsetHeight - scrollbarDragEl.offsetHeight;
197    }
198    scrollbarDragEl.style.top = `${pos}px`;
199    calcPagePos(pos);
200  }
201
202  document.onmousemove = function (em) {
203    // 一边拖动一边改变滚动条位置
204    scrollbarDragEl.style.transitionDuration = '0s';
205    contentEl.style.transitionDuration = '0s';
206    let top = scrollbarDragEl.offsetTop + em.movementY;
207    if (top < 0) {
208      top = 0;
209    } else if (top + scrollbarDragEl.offsetHeight > scrollbarEl.offsetHeight) {
210      top = scrollbarEl.offsetHeight - scrollbarDragEl.offsetHeight;
211    }
212    scrollbarDragEl.style.top = `${top}px`;
213    calcPagePos(scrollbarDragEl.offsetTop);
214  };
215
216  document.onmouseup = function () {
217    document.onmousemove = null;
218    scrollbarDragEl.style.transitionDuration = '0.8s';
219    contentEl.style.transitionDuration = '0.8s';
220    changeActive(currentIndex);
221    changeScroll(currentIndex);
222  };
223});
224
225changeActive(0);
226changeScroll(0);
227
228window.addEventListener(
229  'resize',
230  _.debounce(function () {
231    changeActive(currentIndex);
232    changeScroll(currentIndex);
233  }, 200)
234);