Скроллинг

Mouse Scroll Test

A little wheel is located on the mouse just between the left and right buttons. The most common use of this wheel is scrolling. It lessens the difficulty to view different documents by premising you to scroll up and down. You can also use it for a third button to execute some other tasks. But is your mouse offering 100 percent scrolling efficiency? Well, not exactly 100 percent but a bit near to it? But how you will determine its efficiency, that’s the real question!


What is the Scroll test?

Here comes the Mouse Scroll Test to ease your pain. It will not only determine the efficiency of your mouse but it will also test your ability to use the scrolling wheel. For those who haven’t heard about the mouse test before, let me tell you that it is a test that reveals the exact amount of pixels viewed by you at a particular time while scrolling up and down. The total number of pixels viewed per second determines the exact scrolling speed of a scroll wheel. 

Mostly, when we get our hands on a new mouse, we experience a little bit of training curve to determine how fast or how slow our new gadget scrolls. Sometimes, a mouse offers such a sticky scroll wheel that it takes all our strength to get down a notch. On the other hand, some mouse is so easy-going that they permit us to reach the end of the page with just a little flick. 

How to test speed Scrolling?

It might sound a bit strange and vague but following little steps will make the idea more clear. We have mapped out a smooth way to test the mouse scrolling speed. Follow the below-given steps and get the exact speed of your mouse scrolling;

  • Get access to an authentic website that offers mouse scrolling tests.
  • Make sure you have an active and stable internet connection to get through this test.
  • Select the time-lapse for your test. Such tests record scrolling speed for 5s, 10s, the 30s, 60s, and 100s. So the timer will ultimately end as soon as the given period will be over. Choose time-lapse according to your needs. 
  • As you will reach the site, you will find an option on the screen named “start” or “click here to check the scroll speed”. After selecting the time-lapse you will click on this option. 
  • As soon as you will touch on the particular option, a timer will start simultaneously. 
  • Right after clicking on the option, you will have to scroll actively until the timer runs out and timer gets off.
  • The viewers will be able to see the timer on the screens but rather than focusing on time, you should just concentrate on scrolling. 
  • A bell will ring after completion of time-lapse and your final scroll will be seen on the screen

Click speed test has different versions of clicking tests, the clicks per the second test is short and interesting. If you compare the scroll test with the click test, the mouse clicking test always feels better to play. Have a look at our homepage for interesting CPS tests.

For more fun and improvement, you can challenge your friends and family to participate in this competition and compare your mouse scrolling speeds with them. 

Правила, их границы и области действия.

Итак, в процессе скролла, в зависимости от положения прокрутки сраницы, нам нужно применять к элементам некоторые правила. Для этого необходимо определить границы действия этих правил.

Чтобы было проще понять о чем идет речь, приведу абстрактный пример:

  1. Нужно плавно показать и плавно скрыть некоторый элемент, когда при скролле он будет входить в область видимости и выходить из нее. Элемент должен начать появляться после того, как его верхняя кромка будет на 100px выше нижней границы видимой области окна и полностью появится, когда его нижняя кромка будет на 100px выше нижней границы видимой области окна. Та же логика с исчезновением, только в симметрично обратном порядке.
  2. Элемент нужно повернуть на 180° во время скролла, пока он будет находится в зоне ±30% от центра видимой зоны.

Давайте договоримся, что мы будем называть видимую область документа словом “viewport”. К сожалению, я не могу найти короткий русский аналог этого слова 🙂

В итоге, здесь мы можем выделить 3 области действия правил c 6-ю границами. Давайте опишем их:

  1. Точка, находящаяся на 100px ниже верхней границы элемента, совпадает с нижней границей viewport (элемент начинает появляться)
  2. Точка, находящаяся на 100px выше верхней границы элемента, совпадает с нижней границей viewport (элемент заканчивает появляться)
  3. Точка, находящаяся на 30% ниже центра viewport, совпадает с центром элемента (элемент начинает поворот)
  4. Точка, находящаяся на 30% выше центра viewport, совпадает с центром элемента (элемент заканчивает поворот)
  5. Точка, находящаяся на 100px ниже верхней границы элемента, совпадает с верхней границей viewport (элемент начинает исчезать)
  6. Точка, находящаяся на 100px выше верхней границы элемента, совпадает с верхней границей viewport (элемент заканчивает исчезать)

А теперь подумайте, с чего Вы начали бы описывать всю эту логику? Даже в таком простом сценарии с одним элементом в вычислениях участвуют размер документа, размер viewport, положение viewport, размер элемента, положение элемента, положение скролла… черт возьми, как же не запутаться?

Как пользоваться

Допустим у нас есть элемент с id «el». Тогда наш код будет примерно таким:

const el = document.getElementById('el');
el.scrollIntoView();

В вышеуказанном примере страница прокрутиться до верхней границы элемента. Если нам нужно, чтобы прокрутилось до нижней то нам нужно передать false в метод.

const el = document.getElementById('el');
el.scrollIntoView(); // Прокрутка до верхней границы
el.scrollIntoView(false); // Прокрутка до нижней границы

Бывают и другие нужды, например если нам нужно прокрутить страницу так, чтобы блок оказался в центре. И тут нужно сказать, что функция scrollIntoView() может принимать разные параметры:

element.scrollIntoView(alignToTop); // Булевые параметры true или false
element.scrollIntoView(scrollIntoViewOptions); // Объект с параметрами

В объекте могут быть разные параметры:

  • block — определяет вертикальное выравнивание. Доступные значения: start, center,end и nearest (ближайший). По умолчанию center
  • inline — определяет горизонтальное выравнивание. Актуально если есть карусель элементов или другой горизонтальный скроллинг. Доступные значения: start, center,end и nearest (ближайший). По умолчанию nearest
  • behavior — определяет анимацию перехода. Значение одно из двух. auto и smooth(плавное). По умолчанию auto

Теперь мы знаем какие параметры в объекте может принимать метод.

Проблемы и ограничения

Используемая полосами прокрутки метафора хорошо подходит для навигации только в одном направлении. При использовании двух полос для навигации в двух направлениях теряется наглядность. Кроме того, большинство компьютерных мышей имеют только одно колесо прокрутки. Поэтому большинство руководств по проектированию интерфейсов рекомендуют по возможности избегать появления горизонтальной полосы прокрутки. Хуже всего горизонтальная полоса прокрутки работает со сплошным, не разбитым на колонки, текстом.

Другая проблема, возникающая при использовании полос прокрутки — вложенные области прокрутки. Вложенные области прокрутки осложняют работу с колесом мыши, а несколько рядом расположенных полос прокрутки загромождают пространство и запутывают пользователя.

Также в социальных сетях и на других подобных веб-сайтах нередко используется так называемая «бесконечная прокрутка», при которой по достижению окном просмотра края просматриваемой области, последняя расширяется за счёт подгрузки из сети следующей страницы. Такое поведение страницы идёт вразрез с принципом работы полосы прокрутки, у которой есть начало и конец. После подгрузки новой страницы полоса прокрутки «прыгает», что усложняет работу с полосой прокрутки классическим способом, когда бегунок перемещается курсором мыши.

В каких случаях что использовать

Есть всего несколько случаев, когда бесконечный скроллинг эффективен. Он лучше всего подходит для сайтов и приложений с контентом, который генерируют пользователи (Twitter, Facebook) или с визуальным контентом (Pinterest, Instagram). Пагинация же надежна и хорошо подходит для сайтов и приложений, которые удовлетворяют целенаправленным действиям пользователей.

Сервисы компании Google — наглядное подтверждение этого правила. Google Images использует бесконечный скролл, потому что восприятие изображений происходит гораздо быстрее, чем чтение текстовых результатов поиска. Это и есть основная причина, почему результаты Google Search до сих пор отображаются в более традиционной манере.

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

jQuery плагин прокрутки веб-страницы вверх

плавно прокручивает страницу вверх;кнопка прокрутки не видна вверху страницы, а появляется когда часть уже прокручена и исчезает после возврата к верху; имеет маленький размер и работает во всех браузерах.HTML код<a href=»#» id=»toTop«></a> CSS#toTop {  position:fixed;  z-index:9999;  bottom:10px;  right:10px;  background: #F4FFBF;  border: 1px solid #ccc;  padding: 5px;  cursor: pointer;  color: #666;  text-decoration: none;  width:100px; } #toTop {  position:fixed;  z-index:9999;  bottom:10px;  right:10px;  background: url(‘…/yuor_image_64x64.png’) no-repeat;  width: 64px;  height: 64px;  border: none;  padding: 5px;  cursor: pointer;  color: transparent;  text-decoration: none; } </head>$(function(){   $.fn.scrollToTop=function(){     $(this).hide().removeAttr(«href»);     if($(window).scrollTop()!=»0″){         $(this).fadeIn(«slow»)   }   var scrollDiv=$(this);   $(window).scroll(function(){     if($(window).scrollTop()==»0″){     $(scrollDiv).fadeOut(«slow»)     }else{     $(scrollDiv).fadeIn(«slow»)   }   });     $(this).click(function(){       $(«html, body»).animate({scrollTop:0},»slow»)     })   } }); $(function() {$(«#toTop»).scrollToTop();}); http://magentawave.com

Пагинация


Пагинация делит контент на отдельные страницы. Если вы проскроллите вниз страницы и увидите ряд цифр – этот ряд цифр и есть пагинация сайта или приложения.

Пагинация

Преимущество #1: Хорошая конверсия

Пагинация работает хорошо, когда пользователь ищет что-то в списке результатов, а не просто просматривает поток данных.

Вы можете оценить преимущества пагинации на примере Google Search. Поиск лучших результатов поиска займет секунду или час, в зависимости от предмета исследований. Но когда вы решаете прекратить поиск в Google в текущем формате, вы знаете точное количество результатов поиска. Вы можете принять решение, когда остановиться и как много результатов проштудировать.

Данные результатов поиска Google

Преимущество #2: Ощущение контроля

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

Преимущество #3: Положение элемента

Постраничный интерфейс дает возможность постоянно помнить местоположение элемента. Пользователи не обязательно будут помнить точный номер страницы, но они примерно его запомнят, и пронумерованные ссылки помогут быстрее туда добраться.

С пагинацией пользователи контролируют навигацию, потому что знают, какую страницу выбрать, чтобы попасть туда, где они были.

Пагинация хороша для коммерческих сайтов и приложений. Когда пользователи делают покупки онлайн, им нужна возможность вернуться на место, откуда они ушли, и продолжить шоппинг.

На сайте MR Porter для товаров используется пагинация

Недостатки: Дополнительные действия

Чтобы перейти на новую страничку, используя пагинацию, пользователь должен найти целевую ссылку (например, “Next”), навести на нее мышкой, кликнуть и ждать, пока загрузится новая страничка.

Для получения контента нужно кликнуть

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

Time Commitment — Functionality

Если в меню настроек «Reading Progress» блок настроек «Functionality» отвечает за внешнее поведение скроллинга, то «Functionality» в «Time Commitment» отвечает за логику подсчёта времени, которое понадобиться на чтение конкретного материала. Для этого выводится числовой индикатор времени сразу после заголовка или отдельной строкой под заголовком.

Я считаю, что плагины, которые имеют массу настроек дизайна и логики — самые сложные в понимании. В подобных расширениях WordPress, настройки зависят друг от друга, что может поначалу сбить с толку. Поэтому продолжим изучать опции дальше.

Display On:

Этот параметр выводит на странице, в конце её заголовка, время которое понадобится на чтение материала. Здесь нужно брать нужный тип страницы.

Placement:

В этом параметре настраивается место старта отслеживания процесса скроллинга:

  • Before Title (перед заголовком)
  • After Title (после заголовка)
  • Before Content (перед контентом)

Также вы можете указать другое место старта скроллинга. Для этого необходимо в режиме редактора кода вставит:

Words Per Minute:

Скорость чтения. Для английского языка стандартно установлено значение в 200 слов в минуту. Если мне не изменяет память, то русскоязычный норматив по технике чтения в среднем имеет аналогичное значение. Прошу не путать со знаками.

Format:

В этой опции вместо стандартной надписи, при включённой опции «Display On», вы можете указать собственный текст, который будет отображаться рядом с ярлыком времени, например:

Прошу заметить, что решётку и пробел после неё нужно оставить, например: # минут(а) чтения.

Count Method:


Это метод подсчёта слов. Он влияет на расчёт общего времени, за которое текст должен быть прочитан. Метод «str_word_count» используется для латинских языков, а «count spaces» предназначен для нелатинских и кириллических языков.

Block-Level:

Эта опция отвечает за вывод времени отдельной строкой внизу заголовка. Активируйте ползунок, если хотите чтобы время отображалось под заголовком, а не после него.

More Examples

Example

Scroll the contents of a <div> element TO 50 pixels horizontally and 10 pixels vertically:

var elmnt = document.getElementById(«myDIV»);elmnt.scrollLeft = 50; elmnt.scrollTop = 10;

Example

Scroll the contents of a <div> element BY 50 pixels horizontally and 10 pixels vertically:

var elmnt = document.getElementById(«myDIV»);elmnt.scrollLeft += 50; elmnt.scrollTop += 10;

Example

Scroll the contents of <body> by 30 pixels horizontally and 10 pixels vertically:

var body = document.body; // Safarivar html = document.documentElement; // Chrome, Firefox, IE and Opera places the overflow at the <html> level, unless else is specified. Therefore, we use the documentElement property for these browsersbody.scrollLeft += 30;body.scrollTop += 10; html.scrollLeft += 30;html.scrollTop += 10;

Example

Toggle between class names on different scroll positions — When the user scrolls down 50 pixels from the top of the page, the class name «test» will be added to an element (and removed when scrolled up again).

window.onscroll = function() {myFunction()};function myFunction() {  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {    document.getElementById(«myP»).className = «test»;  } else {     document.getElementById(«myP»).className = «»;  }}

Example

Slide in an element when the user has scrolled down 350 pixels from the top of the page (add the slideUp class):

window.onscroll = function() {myFunction()};function myFunction() {  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {    document.getElementById(«myImg»).className = «slideUp»;  }}

Example

Draw a triangle on scroll:

<!— Use SVG to draw the triangle (has to be <path>) —><svg id=»mySVG»>  <path fill=»none» stroke=»red» stroke-width=»3″ id=»triangle» d=»M150 0 L75 200 L225 200 Z»></svg><script>// Get the id of the <path> element and the length of <path>var triangle = document.getElementById(«triangle»);var length = triangle.getTotalLength();// The start position of the drawing triangle.style.strokeDasharray = length;// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw triangle.style.strokeDashoffset = length;// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolledwindow.addEventListener(«scroll», myFunction);function myFunction() {  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight — document.documentElement.clientHeight);  var draw = length * scrollpercent;  // Reverse the drawing (when scrolling upwards)  triangle.style.strokeDashoffset = length — draw;}</script>

Общие проблемы при реализации любых сценариев со скролл-эффектами.

Во-первых, при написании скролл-эффектов нужно учитывать большое количество факторов и величин:

  • Размер всего документа.
  • Размеры и позиции элементов, участвующих в сценарии, а также в некоторых случаях и их контейнеров.
  • Размер и текущее положение видимой части документа (viewport) при скролле.
  • Направление скролла.
  • Адаптация при изменении размеров окна с отзывчивым (responsive) дизайном

Во-вторых, математические вычисления для описания сценариев получаются довольно массивными, а их сложность возрастает с ростом количества эффектов.

В-третьих, на мобильных девайсах все работает плохо и с тормозами. Javascript изначально работает медленнее. В добавок к этому, мобильные браузеры блокируют выполнение javascript во время скролла.

В-четвертых, Вы никогда не знаете, что искать в Гугле. В большинстве случаев не понятно, как называется тот или иной скролл-эффект. В этом случае, найти готовое решение довольно сложно.

Scroolly спешит на помощь.

Вся прелесть scroolly заключается в том, что каждая из этих границ областей действия правил задается с помощью вот такого наглядного синтаксиса:

  1. (элемент начинает появляться)
  2. (элемент заканчивает появляться)
  3. (элемент начинает поворот)
  4. (элемент заканчивает поворот)
  5. (элемент начинает исчезать)
  6. (элемент заканчивает исчезать)

А весь сценарий описывается так:


Где – viewport, а – элемент. Также можно пользоваться абстракциями для документа и для контейнера элемента. А теперь об этом подробнее и с картинками…

У каждого из них есть опорные точки, которые можно использовать в синтаксисе scroolly:

viewport: , , элемент: , , контейнер: , , документ: , ,

Вот несколько примеров описания областей действия правил c помощью синтаксиса scrolly:

Устройство

Полоса прокрутки обычно располагается у края контейнера. Полосы прокрутки имеют бегунок (или движок), указывающий текущее положение окна просмотра, который можно перемещать, захватывая его мышью, перемещая соответственно и окно. В большинстве случаев размер бегунка относительно всей длины полосы прокрутки соответствует размеру окна просмотра относительно всего просматриваемого элемента.

Полоса прокрутки может содержать кнопки прокрутки, которые позволяют перемещать при каждом нажатии окно просмотра на несколько строк текста, или на определённое количество пикселей. Нажатие на область полосы прокрутки между бегунком и кнопками, как правило, приводит к постраничной прокрутке, либо к переходу на указанную область.

Свойства контейнера

Как и в случае с любым другим свойством, неплохо бы познакомиться со значениями, которые оно принимает. Свойства из спецификации «» применяются как к родителю, так и к дочерним элементам, с определёнными значениями для каждого. Подобно тому, как в Flexbox или CSS Grid родитель становится «flex-» или «grid-» контейнером, можно сказать, что здесь родитель становится scroll-контейнером.

Далее представлены свойства и значения для родительского контейнера и описание принципа их работы.

Значение «» определяет поведение, при котором всякий раз, когда пользователь прекращает прокрутку, браузер должен возвращать её к точке привязки.

Значение «» менее строгое – оно означает, что браузер может возвращаться к точке привязки, если ему это покажется уместным. Из моего опыта, если задано это значение, срабатывание происходит, если прокрутка остановилась в пределах нескольких сотен пикселей от точки привязки.

Если для контейнера задано , он всегда будет привязан либо к верху данного элемента, либо к верху элемента, расположенного ниже, делая невозможным зафиксировать прокрутку в середине высокого элемента.

По умолчанию, при прокрутке дочерние элементы будут прижиматься к самым краям контейнера. Вы можете изменить это, задав для контейнера свойство . Оно имеет такой же синтаксис, что и свойство .

Это может быть полезно, если в вашем макете есть элементы, которые могут мешать содержимому, например фиксированный заголовок.

Scrolls by Type

Scroll Effect Duration Required level

Scroll of Protection VIIScroll of Protection VIScroll of Protection VScroll of Protection IVScroll of Protection IIIScroll of Protection IIScroll of Protection

+340 Armor +285 Armor +240 Armor +195 Armor +150 Armor +105 Armor +65 Armor

30 minutes 30 minutes 30 minutes 30 minutes 30 minutes 30 minutes 30 minutes

70 60 50 40 30 15 1

Scroll of Agility VIIIScroll of Agility VIIScroll of Agility VIScroll of Agility VScroll of Agility IVScroll of Agility IIIScroll of Agility IIScroll of Agility

+30 Agility +25 Agility +20 Agility +15 Agility +10 Agility +8 Agility +5 Agility +3 Agility

30 minutes 30 minutes 30 minutes 30 minutes 30 minutes 30 minutes 30 minutes 30 minutes

80 70 60 50 40 30 15 1

Scroll of Intellect VIIIScroll of Intellect VIIScroll of Intellect VIScroll of Intellect VScroll of Intellect IVScroll of Intellect IIIScroll of Intellect IIScroll of Intellect

+48 Intellect +32 Intellect +24 Intellect +21 Intellect +17 Intellect +12 Intellect +5 Intellect +3 Intellect

30 minutes 30 minutes 30 minutes 30 minutes 30 minutes 30 minutes 30 minutes 30 minutes

80 70 60 50 40 30 15 1

Scroll of Spirit VIIIScroll of Spirit VIIScroll of Spirit VIScroll of Spirit VScroll of Spirit IVScroll of Spirit IIIScroll of Spirit IIScroll of Spirit

+64 Spirit +40 Spirit +32 Spirit +26 Spirit +18 Spirit +13 Spirit +5 Spirit +3 Spirit

30 minutes 30 minutes 30 minutes 30 minutes 30 minutes 30 minutes 30 minutes 30 minutes

80 70 60 50 40 30 15 1

Runescroll of FortitudeScroll of Stamina VIIIScroll of Stamina VIIScroll of Stamina VIScroll of Stamina VScroll of Stamina IVScroll of Stamina IIIScroll of Stamina IIScroll of Stamina

+165 Stamina +132 Stamina +63 Stamina +43 Stamina +34 Stamina +25 Stamina +16 Stamina +5 Stamina +3 Stamina

1 hour 30 minutes 30 minutes 30 minutes 30 minutes 30 minutes 30 minutes 30 minutes 30 minutes

80 80 70 60 50 40 30 15 1

Scroll of Strength VIIIScroll of Strength VIIScroll of Strength VIScroll of Strength VScroll of Strength IVScroll of Strength IIIScroll of Strength IIScroll of Strength

+30 Strength +25 Strength +20 Strength +15 Strength +10 Strength +8 Strength +5 Strength +3 Strength

30 minutes 30 minutes 30 minutes 30 minutes 30 minutes 30 minutes 30 minutes 30 minutes

80 70 60 50 40 30 15 1

Scrolls of Recall

Scrolls of Recall are consumables with effects similar to a Hearthstone. They have a separate 20 minute cooldown which they share with each other, can only be used by scribes, and have a chance of taking the user to the wrong location if the user’s level is too high.

Scroll Maximum reliable level Minimum Inscription to use
Scroll of Recall 40 25
Scroll of Recall II 70 200
Scroll of Recall III 80 350

Прокрутка (скроллинг) документа

Теперь посмотрим, как же все-таки осуществлять прокрутку всего документа. Во-первых, следует помнить, что прокрутка документа работает только после загрузки всей HTML-страницы, когда построено DOM-дерево. До этого рассматриваемые ниже методы скроллинга работать не будут. Так что, вот это имейте в виду.

Далее, в современных браузерах прокручивать документ можно через свойства объекта html:

  • document.documentElement.scrollTop

  • document.documentElement.scrollLeft

В некоторых старых браузерах этот вариант будет работать через body:

  • document.body.scrollTop

  • document.body.scrollLeft

Поэтому, для написания надежного кода, лучше использовать специальные методы скроллинга объекта window:

  • window.scrollBy(offX, offY) – прокручивает страницу относительно её текущего положения на смещения offX, offY пикселей;

  • window.scrollTo(pageX, pageY) – прокручивает страницу до указанных координат pageX и pageY.

Например, вот такой скрипт:

setInterval(function() {
    window.scrollBy(, 5); 
}, 100);

будет прокручивать страницу вниз на 5 пикселей каждые 100 мс. А если прописать вот так:

setInterval(function() {
    window.scrollTo(, 5);
}, 100);

то мы будем все время переходить в одну и ту же позицию на 5 пикселей по вертикальному скроллингу (вручную переводим вниз, он возвращается). И, например, строка:

window.scrollTo(, );

будет возвращать нас просто к началу документа.

Для полноты картины давайте рассмотрим ещё один метод scrollIntoView, который имеет следующий синтаксис:

elem.scrollIntoView(top = true);

Данный метод существует у всех объектов-тегов DOM-дерева и прокручивает документ так, чтобы elem оказался вверху окна браузера (если значение top=true), или внизу, при значении top=false. Пусть, в начале документа имеется заголовок:

<h1 id="header_1">Список свойств метрики</h1>

и мы хотим прокрутить документ, чтобы он стал виден вверху страницы:

setTimeout(function() {
    header_1.scrollIntoView();
});

Обратите внимание, что мы вызвали этот метод через планировщик отложенного вызова – функцию setTimeout с нулевой задержкой. Если мы просто в скрипте напишем:

header_1.scrollIntoView();

то это работать не будет. Как мы отмечали в самом начале, все методы скроллинга работают после полной загрузки документа и построения DOM-дерева. И, вызывая scrollIntoView через setTimeout, мы как раз и выполняем это условие.

More Examples

Example

Toggle between class names on different scroll positions — When the user scrolls down 50 pixels from the top of the page, the class name «test» will be added to an element (and removed when scrolled up again).

window.onscroll = function() {myFunction()};function myFunction() {   if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {    document.getElementById(«myP»).className = «test»;  } else {    document.getElementById(«myP»).className = «»;   }}

Example

Slide in an element when the user has scrolled down 350 pixels from the top of the page (add the slideUp class):

window.onscroll = function() {myFunction()};function myFunction() {  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {     document.getElementById(«myImg»).className = «slideUp»;  } }

В каких случаях использовать бесконечный скроллинг / пагинацию?

Есть всего несколько случаев, когда бесконечный скролл эффективен. Он лучше всего подходит для сайтов и приложений с контентом, генерируемым пользователями (Twitter, Facebook) или с визуальным контентом (Pinterest, Instagram). Пагинация, с другой стороны, надежна и хорошо подходит для сайтов и приложений, которые удовлетворяют целенаправленные действия пользователей.

Работа поисковика Google – отличный пример таких сайтов. В Google Images используется бесконечный скролл, потому что пользователи могут гораздо быстрее прорабатывают изображения, чем текст. Чтение результатов поиска занимает гораздо дольше. В этом и есть причина, почему результаты Google Search до сих пор отображаются в более традиционной манере.


С этим читают