Знаете такая раздражающая панель, которая вылазит слева, если туда мышкой навести?
Вот я её зачем-то сделал. :)
Аналогичный скроллер есть на Хабре, Пикабу и других сайтах. Для тех, кому лень нажать клавишу Home или кликнуть на среднюю кнопку мышки и потянуть вверх.
Я себе такое на сайт ни за что не поставлю, но многим нравится. :)
Меня эта штука раздражает, потому что я как раз иногда намеренно кликаю в самую левую часть сайта, чтобы сбросить фокус. Т.е., например, убрать курсор клавиатуры из поля ввода, гарантированно никуда не кликнув по пути. А там вместо этого перемотчик этот бесячий.
Протестировать можно, если наведете курсор сейчас к левой кромке сайта.
« »
В общем, вот код:
<style> #scrollerToTop { background-color: rgba(160, 160, 160, 0.5); width: 0px; position: fixed; top: 0px; left: 0px; height: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; cursor: pointer; } #scrollerToTopInner {border: 0px solid red; font-size: 36px; color: #fefefe; transform: rotate(90deg); user-select: none; padding-bottom: 6px;} </style> <div id="scrollerToTop"> <div id="scrollerToTopInner"> &&aquo; » </div> </div> <script> document.addEventListener('mousemove', checkMouseMoveOverLeftScroller); var scrollerToTop = document.getElementById('scrollerToTop'); scrollerToTop.addEventListener('click', handleScrollerToTopClick); scrollerToTop.previousYPosition = 0; function checkMouseMoveOverLeftScroller(e) { var nowScrollerWidth = window.getComputedStyle(scrollerToTop).width; if (e.clientX < 40) { if (nowScrollerWidth !== '40px') { // console.log('Показываю левый скроллер'); scrollerToTop.style.width = '40px'; } } else { if (nowScrollerWidth === '40px') { // console.log('Прячу левый скроллер'); scrollerToTop.style.width = '0px'; // Можно сбрасывать предыдущее положение после пропадания скроллера, тогда нельзя будет повторным кликом вернуться обратно при повторном показе скроллера. // scrollerToTop.previousYPosition = 0; } } } function handleScrollerToTopClick() { if (window.scrollY == 0) { if ( scrollerToTop.previousYPosition > 0) { window.scrollTo(0, scrollerToTop.previousYPosition); } } else { scrollerToTop.previousYPosition = window.scrollY; window.scrollTo(0, 0); } } </script>
(из-за чертовых спамеров урлы в коментах теперь писать нельзя)
Комментариев нет