Как переопределить поведение прокрутки CSS с помощью scrollTo в JavaScript

Question

У меня по умолчанию плавная прокрутка, но для одной команды JavaScript scrollTo () я бы хотел переопределить поведение CSS smooth и использовать авто, но JS не отменит CSS.

Что я могу сделать?

Answer 1

Вы можете установить встроенный стиль прокрутки контейнера на auto, а затем отменить изменение, изменив значение html.style.scrollBehavior до и после программной прокрутки. JS * s ScrollToOptions * behavior пара ключ-значение не может переопределить CSS * scroll-behavior. Черновик CSSOM упоминает об этом:

Если пользовательский агент учитывает свойство scroll-поведения и выполняется одно из следующих условий:

• поведение "авто" "и элемент не является нулевым, и его вычисленное значение свойства scroll-поведения является гладким

• поведение является гладким

... затем выполните плавную прокрутку блока в положение. В противном случае выполните мгновенную прокрутку поля до позиции.

Ваш пользовательский агент учитывает свойство scroll-behavior; это означает, что мы собираемся проверить одно из двух условий. Когда вы используете window.scroll({..., behavior: 'auto'}), мы вводим первое условие. behavior, которое мы устанавливаем, действительно auto, элемент действительно не null, а вычисленное значение свойства scroll-behavior действительно smooth. Следовательно, произойдет плавная прокрутка. Чтобы сделать условие ложным, мы можем переопределить вычисленное значение свойства scroll-behavior на auto, используя встроенный стиль.

Вот простой пример. Прокручивайте программно без плавного поведения, нажимая кнопку Scroll down 200. Прокручивайте плавно, нажимая на ссылки.

function scrollNoSmooth() {
  // Setting inline style of scroll-behavior to 'auto' temporarily
  html.style.scrollBehavior = 'auto'
  
  // This 'behavior' cannot override the CSS 'scroll-behavior'
  // Do scroll
  window.scroll({
    top: window.scrollY + 200,
    left: 0,
    // behavior: 'smooth'
  })
  
  // Reverting inline style to empty
  html.style.scrollBehavior = ''
}

const html = document.querySelector('html')
const fixed = document.querySelector('.fixed')

fixed.addEventListener('click', scrollNoSmooth)

html {
  scroll-behavior: smooth;
  position: relative;
}

a {
  display: block;
  height: 400px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fixed {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 150px;
  height: 50px;
  border-radius: 5px;
  background: #121212;
  color: white;
  cursor: pointer;
}

<div class="fixed">Scroll down 200</div>
<a name="A" href="#B">A</a>
<a name="B" href="#C">B</a>
<a name="C" href="#A">C</a>