Чиста CSS-анімація прокрутки

76

Я шукав спосіб прокрутити вниз, натиснувши кнопку, яка знаходиться у верхній частині сторінки, використовуючи лише CSS3.

Тож я знайшов цей підручник: http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/

Демо: http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/

Але він занадто просунутий для моїх потреб, оскільки я просто хочу, щоб браузер прокрутив вниз, натиснувши одну кнопку, розташовану вгорі сторінки, тому мені було цікаво: чи можна робити ці прокрутки CSS без кнопок введення, з якірною міткою?

HTML виглядає так: <a href="#" class="button">Learn more</a>

У мене вже є CSS, який мені потрібно запустити при натисканні кнопки:

/* Button animation tryout. */
.animate {
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@keyframes moveDown{
    0% { 
        transform: translateY(-40px); 
        opacity: 0;
    }
    100% { 
        transform: translateY(0px);  
        opacity: 1;
    }
}

— бездоганний75
джерело

7

Основним недоліком цієї прокрутки на основі CSS є те, що користувач не може вручну прокручувати вгору після того, як прокрутка на основі CSS прокрутилася вниз до вибраного елемента. Здається, користувач інтуїтивно захотів би це зробити, враховуючи анімаційний перехід сторінки! Для мене це повернення до анімації jQuery ({scrollTop: ...}). Або я щось пропустив?

— vicmortelmans

1

За допомогою цього рішення ви можете виправити неможливість повернутися назад. Просто скористайтеся цією розміткою HTML: <div parallax="moveDown">...</div> і вона буде рухатися вниз, коли ви прокручуєте вниз і назад, коли ви прокручуєте вгору ...

— elixon

89

Ви можете зробити це за допомогою прив'язки тегів за допомогою псевдоселектора css3 :target, цей селектор буде спрацьовувати, коли елемент з тим самим ідентифікатором, що і хеш поточної URL-адреси, отримує відповідність. Приклад

Знаючи це, ми можемо поєднати цю техніку з використанням наближених селекторів, таких як "+" та "~", щоб вибрати будь-який інший елемент через цільовий елемент, який ідентифікує збіг з хешем поточної URL-адреси. Прикладом цього може бути щось на зразок того, про що ви запитуєте .

— Ісус Бехарано
джерело

5

Ви можете використовувати цільову техніку для націлювання на будь-який елемент у макеті, навіть на саму сторінку, вибравши тег '<body>' :).

— Jesus Bejarano

2

скажіть, навіщо нам це backface-visibilityу пізнішій демонстрації? ми нічого не

— гортаємо

17

Для всіх, хто хоче побачити мінімум, необхідний для цієї анімації, я взяв форматування тощо, щоб трохи легше було зрозуміти, що робить те, що робить jsfiddle.net/YYPKM/347

— Луїс Меддокс,

3

Як я припускаю, тут не можна бути гнучким, так? Трансформація потребує реального значення і не може бути націлена на інший елемент, правда?

— Keenora Fluffball

2

@LouisMaddox Додавання header { position: fixed; left: 0; top: 0; z-index: 10; }css вашої скрипки забезпечить, що посилання завжди будуть доступними для натискання, оскільки зараз натискання номера 2 зробить номер 1 неможливим.

— Gellie Ann

116

Використовуйте якірні посилання та scroll-behaviorвластивість ( посилання MDN ) для прокручуваного контейнера:

scroll-behavior: smooth;

Підтримка браузера : Firefox 36+, Chrome 61+ (отже, також Edge 79+) та Opera 48+.

Intenet Explorer, не-Chromium Edge і (поки що) Safari не підтримують scroll-behaviorі просто "переходять" до цілі посилання.

Приклад використання:

<head>
  <style type="text/css">
    html {
      scroll-behavior: smooth;
    }
  </style>
</head>
<body id="body">
  <a href="#foo">Go to foo!</a>

  <!-- Some content -->

  <div id="foo">That's foo.</div>
  <a href="#body">Back to top</a>
</body>

Ось скрипка .

І ось також скрипка з горизонтальною та вертикальною прокруткою.

— Фелікс Едельманн
джерело

9

Чому проти? Не могли б ви пояснити, як я можу покращити свою відповідь або чому моє рішення не є добрим?

— Фелікс Едельманн

1

Я насправді ніколи не думав про горизонтальну прокрутку. Але, як ви можете бачити в цій скрипті : jsfiddle.net/1Lfybv56/2, вона також працює - також з горизонтальною та вертикальною прокруткою. Єдину різницю, яку я виявив: при горизонтальній прокрутці прив’язні посилання до тегів name = "..." не працюють, вам потрібно використовувати id = "...".

— Фелікс Едельманн

3

Ви отримуєте голос проти, оскільки на caniuse.com/#search=scroll-behavior там сказано, що він працює лише у firefox. Отже, він по суті марний для сайтів виробничого рівня, оскільки він працює лише в одному браузері, який навіть не використовується найчастіше. Інакше, як трафік на вашому сайті здебільшого Firefox.

— MeanMatt

2

Рішення Ісуса справді приємне, але я додаю відповідь Фелікса, оскільки він працює в Chrome v62, Firefox v57 і розглядається в Edge (поки що немає підтримки в Safari), і ми хочемо тиснути на виробників браузерів. Отже, це те, що я даю своїм студентам як простий приклад для цих браузерів, також із плавним прокручуванням "верхніх" посилань: daveeveritt.github.io/css-smooth-scroll . РЕПО тут з додатковою інформацією та посиланнями в readme: github .com / DaveEveritt / css-smooth-scroll

— Dave Everitt

1

Він працює у всіх, крім надзвичайно архаїчних версіях Chrome та Firefox, а також у браузері Samsung. На всіх моїх сайтах непідтримувані версії цих браузерів становлять незначну частку частки ринку, коли я писав цей коментар. Проблема тут полягає головним чином у відсутності підтримки в Safari і певною мірою в IE та Edge. Однак ... враховуючи, наскільки це елегантно і як це є несуттєвою особливістю, ця відповідь може бути привабливою для багатьох людей (вона мені

— подобається саме

-2

Ви можете використовувати мій скрипт з CodePen, просто обернувши весь вміст у DAV .levit-container.

~function  () {
    function Smooth () {
        this.$container = document.querySelector('.levit-container');
        this.$placeholder = document.createElement('div');
    }

    Smooth.prototype.init = function () {
        var instance = this;

        setContainer.call(instance);
        setPlaceholder.call(instance);
        bindEvents.call(instance);
    }

    function bindEvents () {
        window.addEventListener('scroll', handleScroll.bind(this), false);
    }

    function setContainer () {
        var style = this.$container.style;

        style.position = 'fixed';
        style.width = '100%';
        style.top = '0';
        style.left = '0';
        style.transition = '0.5s ease-out';
    }

    function setPlaceholder () {
        var instance = this,
                $container = instance.$container,
                $placeholder = instance.$placeholder;

        $placeholder.setAttribute('class', 'levit-placeholder');
        $placeholder.style.height = $container.offsetHeight + 'px';
        document.body.insertBefore($placeholder, $container);
    }

    function handleScroll () {
        this.$container.style.transform = 'translateZ(0) translateY(' + (window.scrollY * (- 1)) + 'px)';
    }

    var smooth = new Smooth();
    smooth.init();
}();

https://codepen.io/acauamontiel/pen/zxxebb?editors=0010

— Acauã Montiel
джерело

2

-1; у питанні було запропоновано рішення лише для CSS, але ваша відповідь повністю JavaScript.

— Mark Amery

-3

А для браузерів з підтримкою webkit я мав хороші результати з:

.myElement {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth; // Added in from answer from Felix
    overflow-x: scroll;
}

Це змушує прокрутку поводитися набагато більше, ніж звичайна поведінка браузера - принаймні, вона добре працює на iPhone, на якому ми тестували!

Сподіваюся, що це допоможе,

Ред

— Ед Гастінг-Еванс
джерело

3

Я прочитав специфікацію MDN для властивості -webkit-overflow-scrolling, і я думаю, що це просто змінює поведінку, коли ви робите жест прокрутки. Допитувач задумався про автоматичну прокрутку (отже, ви натискаєте лише кнопку / посилання, і вам не доведеться проводити пальцем вниз або пересувати смуги прокрутки) ;-) До речі, overflow-x: autoце краще в більшості випадків, тому що воно відображає смуги прокрутки, лише якщо є що прокрутити ( scrollзавжди відображатимуть смуги).

— Фелікс Едельманн