Описание скрипта PageScroller

Общее назначение
Данный скрипт представляет собой систему постраничной навигации с возможностью горизонтальной прокрутки. Он позволяет удобно организовать навигацию по большому количеству страниц на веб-сайте.


Основные компоненты
HTML-структура включает:
Контейнер #pageScroll для размещения элементов навигации
Внутренний элемент <span id="content"> для отображения ссылок


CSS-стилизация обеспечивает:
Оформление ссылок и кнопок навигации
Визуальное представление полосы прокрутки
Стили для активных элементов и hover-эффектов
Параметры инициализации


Функция initScrolls() принимает следующие параметры:
Количество страниц по ширине
Высота полосы прокрутки
Режим простой прокрутки (true/false)
Отображение стрелки навигации
Показ общего количества страниц
Минимальная ширина полосы
Текст для отображения количества страниц
Функциональность


Скрипт предоставляет:
Динамическое создание ссылок навигации
Плавную прокрутку между страницами
Визуальную индикацию текущей страницы
Возможность управления через мышь
Поддержку колесика прокрутки
Адаптацию под различные размеры окна
Особенности реализации


Интерактивные элементы включают:
Полосу прокрутки с возможностью перетаскивания
Активные ссылки с визуальной обратной связью
Информационное отображение общего количества страниц


Оптимизация обеспечивает:
Корректную работу в различных браузерах
Адаптацию под разные размеры экрана
Эффективное использование ресурсов


Данный скрипт может быть полезен для:
Форумов и блогов с большим количеством страниц
Каталогов товаров
Новостных порталов
Любых сайтов с пагинацией


на Главную страницу сайта после $body$ разместите данный код
Код
<style>
#pageScroll_load span {white-space:nowrap}
#pageScroll_load a{display:inline-block;font:12px Tahoma;width:38px;padding:2px 0;margin:1px;color:#88aa00;text-align:center;text-decoration:none;}
#pageScroll_load a:hover, .curPage{background:#88aa00;color:#fff !important;}
#pageScroll_load {margin:0 auto;overflow:hidden;position:relative;top:-3px;cursor:default}
.scrollWrap {background:#dfdfdf;position:relative}
.scrollBar {background:#777;cursor:pointer;cursor:hand;position:relative;z-index:400}
.scrollPage {background:#88aa00;position:absolute;z-index:300;}
.pagesTotal {font:12px Tahoma;color:#bbb}
#pagesBlock1, .pagesBlock1, .pagesBlockuz1 {display:none !important;}
  </style>
<div id="pageScroll_load"><span id="content_load"></span></div>
  <script src="https://htmlstart.ucoz.net/_ld/1/179_page-scroller.js"></script>
  <script>initScrolls(5/*количество страниц по ширине*/,5/*высота бара*/,false/*простая прокрутка*/,true/*стрелка*/,true/*всего страниц*/,7/*минимальная ширина бара*/,'Всего страниц : [NUM]')</script>


Новая версия скрипта..

Код
function initScrolls(p, v, z, A, B, j, C) {
  var w, m, g, q, s, n, r, o, d, t, k, i, l;
  var rafId = null; // для requestAnimationFrame
  var moveHandler = null; // ссылка на mousemove, чтобы снять на mouseup
  var touchMoveHandler = null; // ссылка на touchmove
  k = document.getElementById("content_load");
  i = document.getElementById("pageScroll_load");

  function D() {
  var a, b, c, e;
  a = document.getElementById("pagesBlock1");
  if (!a) {
  c = document.getElementsByTagName("span");
  for (var f = 0; f < c.length; f++) {
  if (/pagesBlock(uz)?1/.test(c[f].className)) {
  a = c[f];
  }
  }
  }
  b = a.getElementsByTagName('*');
  for (e = 0; e < b.length; e++) {
  if (/(A|B)/.test(b[e].tagName) && /[0-9]+/.test(b[e].innerHTML)) {
  d = b[e].innerHTML;
  }
  }
  t = a.getElementsByTagName("b")[0].innerText || a.getElementsByTagName("b")[0].textContent;
  E(d, t);
  }
  D();

  function E(a, b) {
  var c, e, f;
  f = [];
  const block = document.querySelector('.pagesBlock1');
  const hash = block ? (block.innerHTML.match(/spages\('\d+','([^']+?)'\)/) ?? [, ''])[1] : '';
  for (c = 1; c <= a; c++) {
  e = c == b ? 'class="curPage" ' : "";
  const href = hash ? 'javascript:spages(' + c + ', \'' + hash + '\');' : '/?page' + c;
  f[c] = "<a " + e + 'href="' + href + '" onclick="spages(' + c + ', \'' + (hash || 'this') + '\');">' + c + "</a>";
  }
  k.innerHTML = f.join('');
  l = k.offsetWidth / d;
  if (!j) {
  j = l;
  } else {
  j = j < 7 ? 7 : j;
  }
  n = Math.round((p * l / d) * p);
  n = n < j ? j : n;
  r = Math.round(p * l / d);
  r = r < j ? j : r;
  o = p * l;
  F();
  }

  function F() {
  if (d <= p) {
  i.style.width = d * l + 'px';
  } else {
  k.style.position = "absolute";
  var a = document.createElement("DIV");
  a.style.height = k.offsetHeight + "px";
  i.style.width = p * l + "px";
  i.appendChild(a);
  m = document.createElement("DIV");
  g = document.createElement("DIV");
  q = document.createElement("DIV");
  m.style.cssText = "width:" + o + "px;height:" + v + "px;font:0";
  m.className = "scrollWrap";
  g.style.cssText = "width:" + n + "px;height:" + v + "px;font:0";
  g.className = "scrollBar";
  if (A) {
  g.innerHTML = "<div style='position:absolute;left:50%;margin-left:-3px;top:-1px;width:5px;height:1px;' class='scrollBar'></div><div style='position:absolute;left:50%;margin-left:-2px;top:-2px;width:3px;height:1px;' class='scrollBar'></div><div style='position:absolute;left:50%;margin-left:-1px;top:-3px;width:1px;height:1px;' class='scrollBar'></div>";
  }
  q.style.cssText = "width:" + r + "px;height:" + v + "px;";
  q.className = "scrollPage";
  i.appendChild(m);
  m.appendChild(q);
  m.appendChild(g);
  if (B) {
  s = document.createElement("DIV");
  s.className = "pagesTotal";
  s.innerHTML = C.replace('[NUM]', d);
  i.appendChild(s);
  }
  G();
  }
  }

  function H() {
  // --- клик по дорожке ---
  m.onclick = function (a) {
  var b = a.target;
  if (b == m || b == q) {
  u(Math.round(x(a) - I(i) - n / 2));
  }
  };

  // --- mouseup на документе: снимаем drag и mousemove ---
  document.addEventListener("mouseup", function () {
  w = false;
  if (moveHandler) {
  document.removeEventListener("mousemove", moveHandler);
  moveHandler = null;
  }
  });

  // --- старт drag мышью ---
  g.onmousedown = function (b) {
  var c, e;
  w = true;
  c = g.offsetLeft;
  b.preventDefault();
  e = x(b);

  moveHandler = function (a) {
  if (w) {
  u(Math.round(x(a) - e + c));
  }
  };
  document.addEventListener("mousemove", moveHandler);
  };

  // --- старт drag пальцем (touch) ---
  g.addEventListener("touchstart", function (b) {
  var c, e;
  w = true;
  c = g.offsetLeft;
  e = b.touches[0].clientX;

  touchMoveHandler = function (a) {
  if (w) {
  u(Math.round(a.touches[0].clientX - e + c));
  a.preventDefault();
  }
  };
  document.addEventListener("touchmove", touchMoveHandler, { passive: false });
  }, { passive: true });

  // --- конец drag пальцем ---
  document.addEventListener("touchend", function () {
  w = false;
  if (touchMoveHandler) {
  document.removeEventListener("touchmove", touchMoveHandler);
  touchMoveHandler = null;
  }
  });

  // --- тап по дорожке на тач-устройстве ---
  m.addEventListener("touchend", function (a) {
  var b = a.target;
  if (b == m || b == q) {
  u(Math.round(a.changedTouches[0].clientX - I(i) - n / 2));
  }
  }, { passive: true });

  // --- колесо мыши ---
  function f(a) {
  var b = 0;
  if (a.wheelDelta) {
  b = a.wheelDelta / 120;
  } else if (a.detail) {
  b = -a.detail / 3;
  }
  if (b) {
  u(Math.round(g.offsetLeft + b * Math.ceil(o / d)));
  }
  a.preventDefault();
  }
  i.addEventListener("wheel", f, { passive: false });
  }

  function G() {
  var a, b;
  a = Math.round(o / d * (t - 1));
  b = o - r;
  if (a < 0) {
  a = 0;
  } else if (a > b) {
  a = b;
  }
  q.style.left = a + "px";
  u(Math.round((o / d) * (t - 0.5) - n / 2));
  H();
  }

  function u(a) {
  // --- requestAnimationFrame: сглаживание при быстрых событиях ---
  if (rafId !== null) {
  cancelAnimationFrame(rafId);
  }
  rafId = requestAnimationFrame(function () {
  rafId = null;

  var b, c;
  b = o - n;
  if (a < 0) {
  a = 0;
  } else if (a > b) {
  a = b;
  }
  g.style.left = a + "px";
  c = Math.round((k.offsetWidth - i.offsetWidth) / b * -g.offsetLeft);
  c = z ? c : Math.round(c / l) * l;
  k.style.left = c + "px";
  });
  }

  function x(a) {
  return a.clientX + (window.scrollX || document.documentElement.scrollLeft);
  }

  function I(a) {
  var b = a.offsetLeft;
  while (a.offsetParent != null) {
  a = a.offsetParent;
  b += a.offsetLeft;
  if (a.tagName == "BODY") {
  break;
  }
  }
  return b;
  }
}