Индикатор прокрутки CSS - чистый индикатор прокрутки CSS

внешний интерфейс JavaScript CSS ECMAScript 6

Некоторое время назад я прочитал «Введение в ECMAScript 6» г-на Руана и увидел, что каждая страница главы на официальном сайте имеет что-то похожее на индикатор выполнения.Из любопытства я проверил Интернет и обнаружил, что эта штука называетсяScroll Indicator.

Индикатор прокрутки: Индикатор прокрутки. С точки зрения непрофессионала, это пропорция текущей видимой области от верхней части страницы.Эффект выглядит следующим образом:

JavaScript-подход

Перед тем, как зачерпнуть исходники, я сначала подумал над идеей реализации:

  • После загрузки страницы получите высоту документа страницы (DH), текущую высоту видимой области (VH) и высоту видимой области от верхней части страницы.scrollTop(й);
  • (DH — VH) — значение, которое необходимо прокатать;
  • страница монитораscrollмероприятие,(TH / (DH - VH)) * 100%, – текущая пропорция;
  • Конечно, необходимо учитывать节流,防抖.

Основной код выглядит следующим образом:

var dh = $(document).height();
var vh = $(window).height();
var sHeight = dh - vh;
$(window).scroll(function() {  
    var perc = $(window).scrollTop() / (dh - vh);
    $('.j-scroll-indicator').css({width: perc * 100 + '%'});
)};

Вот эффект после внедрения:

DEMO

Затем я пошел искать исходный код официального сайта es6 Учителя Руана:

(function() {
      var $w = $(window);
      var $prog2 = $('.progress-indicator-2');
      var wh = $w.height();
      var h = $('body').height();
      var sHeight = h - wh;
      $w.on('scroll', function() {
        window.requestAnimationFrame(function(){
          var perc = Math.max(0, Math.min(1, $w.scrollTop() / sHeight));
          updateProgress(perc);
        });
      });

      function updateProgress(perc) {
        $prog2.css({width: perc * 100 + '%'});
        ditto.save_progress && store.set('page-progress', perc);
      }

    }());

Неудивительно, что подход тот же.

Затем они начинают слепые размышлять, перед использованиемcssЕсли вы сделали поток водопада, вы можете использоватьcssВы возитесь с индикаторами прокрутки?

CSS-подход

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

Как рассматривать вышеуказанные вопросы? Мы находим ответ, разбивая действие индикатора прокрутки:

  • полоса прогресса черного цвета
  • Красный указывает высоту документа
  • Зеленый, синий и оранжевый указывают на прокрутку окна.

То есть:(TH / (DH - VH))в формулеTHВам не нужно знать, просто нужноDH - VHВысота , то есть высота прямоугольного треугольника в порядке.

Теперь проблема трансформируется в: как найти VH, в это времяvhЭта единица длины появилась,vhпредставляет собой типографское измерение, основанное на единицах области просмотра. vh может получить высоту текущего окна. Ну, теперь кажется, что можно писать.

DEMO

<body>
    <div class="main">
        <h1>滚动鼠标</h1>
    </div>
</body>
.main {
   margin: 0;
   padding: 0;
   display: block;
   height: 30000px;
   text-align: center;
   line-height: 100px;
}

body {
   margin: 0;
   padding: 0;
   background: linear-gradient(to right top, #369 50%, #fff 50%);
   background-size: 100% calc(100% - 99vh);
}

body:before {
   content: '';
   position: fixed;
   top: 4px;
   bottom: 0;
   width: 100%;
   z-index: -1;
   background: #fff;
}

Проблем в реализации в целом нет, но есть следующие недостатки:

  • Если содержимое документа слишком маленькое (высота слишком мала), индикатор выполнения будет иметь форму стрелки, что некрасиво (вы можете рассмотреть возможность добавления эффекта матового стекла, чтобы ослабить его)
  • background-size: 100% calc(100% - 99vh);99vh является относительным значением.Если высота окна относительно мала, индикатор выполнения не будет заполнять слот индикатора выполнения (рассмотрите возможность добавления min-height, чтобы ослабить его)

над

Категории