如何控制window.scrollTo(x坐标，y坐标)中的滚动速度？

Question

如何控制window.scrollTo(x坐标，y坐标)中的滚动速度？

javascriptjqueryscrollto

4

我是js的新手。

我在我的大学项目中需要基于<a>标签href属性来滚动页面。

由于我的项目是单页应用程序，因此ScrollTop功能无法正常工作。我可以使用窗口scrollTo(x坐标，y坐标) 功能来实现。

但现在问题是我想在页面中创建平滑滚动效果。

如何在scrollTo(x,y)函数中实现？

先行致谢。 :)

- Parthasarathy

提示！您可以使用setInterval函数。 - madalinivascu

@madalin setInterval('ss.scrollWindow('+ss_stepsize+','+desty+',"'+anchor+'")',10); 如果我增加它，它会导致延迟而不是减慢屏幕移动。 - Parthasarathy

@shubhamagrawal 我正在使用 kryogenix 的 smoothscroll.js。 - Parthasarathy

@Ranj 我尝试了那个 CSS 动画的技巧，由于这个项目是一个单页应用，所以它并没有反映出来。 - Parthasarathy

你可以在这里查看答案，类似的问题。[链接]（https://dev59.com/nGs05IYBdhLWcg3wJ-yQ） - Nirbhay Jha

显示剩余3条评论

2个回答

1

在2018年，您现在可以使用新的API原生地（即使用原始JavaScript）实现平滑滚动，包括：

Element.scrollTo({ScrollingOptionsObject})
Element.scrollBy({ScrollingOptionsObject})
Element.scrollIntoView({ScrollingOptionsObject})

浏览器支持：

https://caniuse.com/#feat=scrollintoview

使用原生JavaScript实现平滑滚动的工作示例：

var pageLinks = [... document.querySelectorAll('li button')];

function scrollToSection(e) {

    var targetSection = document.getElementById(e.target.dataset.targetSection);
    targetSection.scrollIntoView({behavior: 'smooth'});
}

for (let i = 0; i < pageLinks.length; i++) {

    pageLinks[i].addEventListener('click', scrollToSection, false);
}

ul {
margin-bottom: 480px;
}

button {
color: rgb(0,0, 239);
text-decoration: underline;
background: none;
border: none;
cursor: pointer;
}

section {
display: block;
width: 50%;
height: 300px;
margin: 12px 0 96px;
padding: 6px;
border: 1px solid rgb(127, 127, 127);
}

<ul>
<li><button type="button" data-target-section="section-1">Go to Section 1</button></li>
<li><button type="button" data-target-section="section-2">Go to Section 2</button></li>
<li><button type="button" data-target-section="section-3">Go to Section 3</button></li>
<li><button type="button" data-target-section="section-4">Go to Section 4</button></li>
<li><button type="button" data-target-section="section-5">Go to Section 5</button></li>
</ul>

<section id="section-1" class="section-1">
<h2>This is Section 1</h2>
</section>

<section id="section-2" class="section-2">
<h2>This is Section 2</h2>
</section>

<section id="section-3" class="section-3">
<h2>This is Section 3</h2>
</section>

<section id="section-4" class="section-4">
<h2>This is Section 4</h2>
</section>

<section id="section-5" class="section-5">
<h2>This is Section 5</h2>
</section>

有关新的JavaScript平滑滚动API的更多阅读资料：

如果您喜欢那个... 这里有一些真正令人兴奋的事情：

CSS值scroll-behaviour的浏览器支持略微落后于以上javascript API的浏览器支持，但它的实现可以实现惊人的效果，例如：

body {scroll-behavior: smooth;}

浏览器支持在这里：

https://caniuse.com/#search=scroll-behavior

CSS平滑滚动的工作示例：

:root { scroll-behavior: smooth; } ul { margin-bottom: 480px; } section { display: block; width: 50%; height: 300px; margin: 12px 0 96px; padding: 6px; border: 1px solid rgb(127, 127, 127); }

<ul> <li><a href="#section-1">Go to Section 1</a></li> <li><a href="#section-2">Go to Section 2</a></li> <li><a href="#section-3">Go to Section 3</a></li> <li><a href="#section-4">Go to Section 4</a></li> <li><a href="#section-5">Go to Section 5</a></li> </ul> <section id="section-1" class="section-1"> <h2>This is Section 1</h2> </section> <section id="section-2" class="section-2"> <h2>This is Section 2</h2> </section> <section id="section-3" class="section-3"> <h2>This is Section 3</h2> </section> <section id="section-4" class="section-4"> <h2>This is Section 4</h2> </section> <section id="section-5" class="section-5"> <h2>This is Section 5</h2> </section>

- Rounin

1

嘿@Rounin，你好吗？我正在寻找比{...behaviour: "smooth"}更顺畅的解决方案。有没有办法真正控制滚动动画需要多少毫秒才能完成？ - Arp

最好还是作为你自己的新问题来询问，@Alioshr。 - Rounin

注意：在Chrome中，.scrollIntoView()有时会出现问题。请参见：https://github.com/iamdustan/smoothscroll/issues/28（这是一个平滑滚动的polyfill问题，但他们谈到了Chrome的行为和解决方法。） - Ouroborus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Wolf · Accepted Answer

距离和速度

如果您想控制滚动的距离和速度，可以使用下面的函数：

/**
 * A function to scroll a given amount of y pixels in a given time
 */
async function scrollByY(y, time) {
  const start = performance.now()
  const startY = window.scrollY
  const endY = startY + y
  while (performance.now() < start + time) {
    const progress = (performance.now() - start) / time
    window.scrollTo(0, startY + y * progress)
    // wait for the next frame
    await new Promise(requestAnimationFrame)
  }
  window.scrollTo(0, endY)
}

document.querySelector("#one").addEventListener("click", async () => {
  await scrollByY(100, 500)
})

document.querySelector("#two").addEventListener("click", async () => {
  await scrollByY(200, 2000)
})

<body style="margin: 0">
  <div style="position: fixed">
    <button id="one">scroll 100px in 0.5s</button>
    <button id="two">scroll 200px in 2s</button>
  </div>
  <div style="background: yellowgreen; height: 100px"></div>
  <div style="background: orange; height: 100px"></div>
  <div style="background: darkgoldenrod; height: 100px"></div>
  <div style="background: darkolivegreen; height: 100px"></div>
  <div style="background: blueviolet; height: 100vh"></div>
</body>