如何即时滚动到位置?
How to Instantly Scroll to Position?
如何在启用平滑滚动时使用 JavaScript 立即将 window 滚动到某个位置?
:root {
scroll-behavior: smooth;
}
有没有办法忽略此 CSS 规则?像这样:
window.scrollBy({ top: 0, behavior: 'instantly' });
您是否尝试过滚动选项 behavior: auto
?
var scrollOptions = {
left: leftValue,
top: topValue,
behavior: 'auto'
}
window.scrollBy(scrollOptions);
也许你可以在调用 .scrollBy()
之前设置 scroll-behavior
,然后在调用
之后重新设置它。
var root = document.querySelector(':root');
var btnInstantScroll = document.querySelector('#btnInstantScroll');
var btnDefaultScroll = document.querySelector('#btnDefaultScroll');
btnInstantScroll.addEventListener('click', function() {
// Change scroll behavior
root.setAttribute("style", "scroll-behavior: auto;");
// Timeout ensures styles are applied before scrolling
setTimeout(function() {
window.scrollBy(0, -2000);
// Reset to CSS defaults.
root.removeAttribute("style");
}, 0)
})
btnDefaultScroll.addEventListener('click', function() {
window.scrollBy(0, -2000);
})
:root {
scroll-behavior: smooth;
}
.scrollable {
height: 2000px;
background: repeating-linear-gradient(#e66465, #e66465 20px, #9198e5 20px, #9198e5 25px);
}
.controls {
padding: 15px;
position: fixed;
bottom: 0;
}
<div class="scrollable">
</div>
<div class="controls">
<button type="button" id="btnInstantScroll">
Instant scroll
</button>
<button type="button" id="btnDefaultScroll">
Scroll using doc settings
</button>
</div>
给你:
window.scrollTo({
top: 0,
left: 0,
behavior: 'instant',
});
scroll-behavior: auto;
不起作用。 scroll-behavior: instant;
不再存在
这是唯一对我有用的东西:
html {
scroll-behavior: auto !important;
}
如何在启用平滑滚动时使用 JavaScript 立即将 window 滚动到某个位置?
:root {
scroll-behavior: smooth;
}
有没有办法忽略此 CSS 规则?像这样:
window.scrollBy({ top: 0, behavior: 'instantly' });
您是否尝试过滚动选项 behavior: auto
?
var scrollOptions = {
left: leftValue,
top: topValue,
behavior: 'auto'
}
window.scrollBy(scrollOptions);
也许你可以在调用 .scrollBy()
之前设置 scroll-behavior
,然后在调用
var root = document.querySelector(':root');
var btnInstantScroll = document.querySelector('#btnInstantScroll');
var btnDefaultScroll = document.querySelector('#btnDefaultScroll');
btnInstantScroll.addEventListener('click', function() {
// Change scroll behavior
root.setAttribute("style", "scroll-behavior: auto;");
// Timeout ensures styles are applied before scrolling
setTimeout(function() {
window.scrollBy(0, -2000);
// Reset to CSS defaults.
root.removeAttribute("style");
}, 0)
})
btnDefaultScroll.addEventListener('click', function() {
window.scrollBy(0, -2000);
})
:root {
scroll-behavior: smooth;
}
.scrollable {
height: 2000px;
background: repeating-linear-gradient(#e66465, #e66465 20px, #9198e5 20px, #9198e5 25px);
}
.controls {
padding: 15px;
position: fixed;
bottom: 0;
}
<div class="scrollable">
</div>
<div class="controls">
<button type="button" id="btnInstantScroll">
Instant scroll
</button>
<button type="button" id="btnDefaultScroll">
Scroll using doc settings
</button>
</div>
给你:
window.scrollTo({
top: 0,
left: 0,
behavior: 'instant',
});
scroll-behavior: auto;
不起作用。 scroll-behavior: instant;
不再存在
这是唯一对我有用的东西:
html {
scroll-behavior: auto !important;
}