我正在处理一个单页投资组合，该投资组合使用使用 href 的顶部安装的导航栏进行导航。我scroll-behavior: smooth;在我的头脑中使用了 CSS，这使得在 chrome 中查看时导航流畅且令人愉悦。使用 Safari 加载站点时，此行为将丢失并且导航是即时的。是否有与此 CSS 功能等效的 Safari？
Adi*_*kur 22
Safari 不支持scroll-behavior: smooth，您需要一些自定义 javascript 才能达到相同的效果。看到这个：Javascript - window.scroll({ behavior: 'smooth' }) not working in Safari
如果您正在寻找一种简单的方法来启用它，您可以查看我过去 4 年构建的 API： https: //github.com/CristianDavideConte/universalSmoothScroll。
它速度极快，易于使用，并且可以在几乎所有浏览器（不支持 IE）上实现平滑滚动，并且具有高度的自定义程度（缓动、持续时间、可中断性等...）。
下面您将找到如何使用 API 在您的网站上快速启用平滑滚动的示例：
由于 fromUniversalSmoothScroll 6.0.0库Ease-Functions已转换为 a module，因此此答案已更新以使其在 stackoverflow 上工作。
问题是 stackoverflow不支持 snippets 的 javascript 部分中的模块，因此您会找到一种解决方法来使其工作：您可以忽略它，因为在普通网站中您不会使用它。
/*
* In this example we will only customize the document's scrolling,
* but the API fully support every custom scrollable container
*/
function init() {
/*
* We tell the API which element is the one that scrolls the document
* (useful whenever it's something like the body element, a custom container,
* a framework specific container, etc...)
*/
uss.setPageScroller(window);
/**
* This API function, enables the anchors'
* smooth-scrolling to the corresponding section
*/
uss.hrefSetup();
/**
* This API function, sets the easing of the pageScroller (that we set to window) to a
* medium speed(the "QUART" part) ease-in-out function that last exactly 1 second.
*/
uss.setStepLengthCalculator(EASE_IN_OUT_QUART(1000));
/**
* This API function allow us to stop the scrolling on a container.
* In this case, we don't want any more scrolling
* if the user scrolls the document with the mousewheel.
*/
window.addEventListener(
"wheel",
() => uss.stopScrolling(window)
);
}
/*
* YOU CAN IGNORE THIS PART.
* This is just part of the workaround used on stackoverflow to make modules work.
* Basically it loads the init function whenever the document is fully loaded and the module is imported.
* Check out this discussion for more informations: https://meta.stackoverflow.com/questions/389108/support-javascript-es6-modules-in-code-snippets
*/
document.addEventListener("readystatechange", () => document.readyState === "complete" && init());/* Just styling, none of this is necessary for the API */
html, body {
margin: 0;
}
nav {
display: flex;
justify-content: center;
position: fixed;
margin-top: 0;
width: 100vw;
}
nav > a {
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
height: 20vh;
width: 15vw;
background: rgba(20,20,20,0.5);
transition: all 0.3s;
}
nav > a:hover {
background: rgba(20,20,20,0.6);
}
.horizontal-container {
display:flex;
}
.page {
width: 100vw;
height: 100vh;
flex-shrink: 0;
}
#to1 {
background: linear-gradient(135deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
}
#to2 {
background: linear-gradient(225deg, rgba(121,9,9,1) 0%, rgba(255,42,0,1) 100%);
}
#to3 {
background: linear-gradient(45deg, rgba(227,176,7,1) 0%, rgba(255,239,0,1) 100%);
}
#to4 {
background: linear-gradient(315deg, rgba(7,101,6,1) 0%, rgba(0,255,98,1) 100%);
}<html>
<head>
<!-- We include the API -->
<script src = "https://cdn.jsdelivr.net/npm/universalsmoothscroll@latest/universalsmoothscroll-min.js"></script>
<!-- We include the API's easing library (this is optional) -->
<script src = "https://cdn.jsdelivr.net/npm/universalsmoothscroll@latest/universalsmoothscroll-ease-functions-min.js" type = "module"></script>
<!--
YOU CAN IGNORE THIS PART.
This is just part of the workaround used on stackoverflow to make modules work.
It import the module and turns the import into a global variable.
Check out this discussion for more informations: https://meta.stackoverflow.com/questions/389108/support-javascript-es6-modules-in-code-snippets
-->
<script type = "module">
import {EASE_IN_OUT_QUART} from "https://cdn.jsdelivr.net/npm/universalsmoothscroll@latest/universalsmoothscroll-ease-functions-min.js";
window.EASE_IN_OUT_QUART = EASE_IN_OUT_QUART;
</script>
</head>
<body>
<nav> <!-- header -->
<a href="#to1"><p>Blue</p></a>
<a href="#to2"><p>Red</p></a>
<a href="#to3"><p>Yellow</p></a>
<a href="#to4"><p>Green</p></a>
</nav>
<!-- Website pages -->
<div class="horizontal-container">
<div id="to1" class="page"></div>
<div id="to2" class="page"></div>
</div>
<div class="horizontal-container">
<div id="to3" class="page"></div>
<div id="to4" class="page"></div>
</div>
</body>
</html>小智 7
根据elmcrest的评论，它有效。
<script defer src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js"></script>
| 归档时间： |
|
| 查看次数： |
57247 次 |
| 最近记录： |