如何在JavaScript中使用scrollTo覆盖CSS滚动行为 [英] How to override the CSS scroll behavior with scrollTo in JavaScript

问题描述

默认情况下，我的滚动平滑，但是对于一个JavaScript scrollTo()命令，我想覆盖CSS的平滑"行为并使用auto，但是JS不会覆盖CSS.

I have scroll smooth by default, but for one JavaScript scrollTo() command I'd like to override the CSS 'smooth' behavior and use auto, but the JS won't override the CSS.

我该怎么办?

推荐答案

您可以将容器滚动的内联样式设置为 auto ，然后通过更改 html的值来还原更改.style.scrollBehavior ，以编程方式滚动之前和之后.JS的 ScrollToOptions 的行为键值对不能覆盖CSS的 scroll-behavior . CSSOM草案提到了这一点:

You can set the inline style of your container's scroll to auto, then reverting the change by altering the value of html.style.scrollBehavior before and after scrolling programmatically. JS's ScrollToOptions's behavior key-value pair cannot override CSS's scroll-behavior. The CSSOM draft mentions this:

如果用户代理使用了scroll-behavior属性，并且满足以下条件之一:

If the user agent honors the scroll-behavior property and one of the following are true:

•行为为自动"，元素不为null，其计算值为滚动行为属性很平滑

• behavior is "auto" and element is not null and its computed value of the scroll-behavior property is smooth

•行为流畅

...然后对框进行平滑滚动以定位.否则，请立即滚动框以定位.

...then perform a smooth scroll of box to position. Otherwise, perform an instant scroll of box to position.

您的用户代理尊重 scroll-behavior 属性；这意味着我们将要检查两个条件之一.当您使用 window.scroll({...，behavior:'auto'})时，我们正在输入第一个条件.我们设置的 behavior 确实是 auto ，元素的确不是 null ，并且计算的值是 scroll-behavior 属性确实是 smooth .因此，将发生平滑滚动.要使条件为假，我们可以使用内联样式将 scroll-behavior 属性的计算值覆盖为 auto .

Your user agent honors the scroll-behavior property; this means that we're going to check one of the two conditions. When you're using window.scroll({..., behavior: 'auto'}), we're entering the first condition. The behavior we're setting is indeed auto, element is indeed not null, and the computed value of scroll-behavior property is indeed smooth. Therefore, a smooth scroll will happen. To make the condition false, we can override the computed value of the scroll-behavior property to auto by using an inline style.

这是一个简单的例子.通过单击向下滚动200 按钮，以编程方式滚动，而不会出现流畅的行为.单击链接可平滑滚动.

Here's a simple example. Scroll programmatically without smooth behavior by clicking the Scroll down 200 button. Scroll smoothly by clicking the links.

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>

这篇关于如何在JavaScript中使用scrollTo覆盖CSS滚动行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！