简介
1、锚点作用：在长文档中常见，点击锚点，让页面上下滑动定位到某个想定位的位置，这个想定位的位置就被称为锚点。
2、适用场景：长文档。例如目录（差不多这个意思，好理解），点击对应目录，该目录下面的内容展示在文档可视范围。
3、目的：触发点击等事件时，页面可视区域能够展示我想看到的内容，以下代码就是为了解决这个问题👇
4、办法：
a. <a>标签定义锚点；
b. element.documentElement.scrollTop = number，设置元素的滚动距离使得页面处于某个位置；
c. window.scrollTo({})，直接操作页面滚动；
d. element.scrollIntoView({})，让element展示在页面可视区域。
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>043-滚动条滑倒最顶端</title>
<style>
* {
scroll-behavior: smooth;
}
.box {
background: rgb(171, 214, 200);
width: 300px;
height: 3000px;
}
.box1 {
background: rgb(243, 161, 179);
}
</style>
</head>
<body>
<div id="app">
<div class="box box1"></div>
<a href="#btn-to-top">超链接至下面👇</a>
<button id="btn-to-bottom" type="button">去下面👇</button>
<div class="box"></div>
<button id="btn-to-top" type="button">去上面👆</button>
<a href="#btn-to-bottom">超链接至上面👆</a>
</div>
<script type="text/javascript">
// 获取元素
const btnToBottom = document.getElementById('btn-to-bottom')
const btnToTop = document.getElementById('btn-to-top')
// 方式1：html页面中的<a>元素已经设置了锚点，点击a元素可以平滑的滚动到对应的href中
// 例如：【超链接至下面👇】点击超链接，就会平滑的滑动到【去上面👆】button展示在可视区域的最顶端（由于页面高度和滚动条长度原因，只能展示在页面底端）
// 让滚动条回到最底端👇
btnToBottom.addEventListener('click', function () {
// 方式2：滚动到页面最底端、配合上面的*css可以有动画，否则无动画
document.documentElement.scrollTop = document.body.scrollHeight
// 方式3：滚动到页面最底端、有动画
// 'smooth'平滑滚动、'instant'瞬息、'auto'有css则按照css来（例如上面的*css样式），否则就是instant
window.scrollTo({
top: document.body.scrollHeight,
behavior: 'auto',
})
// 方式4：让btn2滚动到可视页面最顶端、无动画
// 'smooth'平滑滚动、'instant'瞬息、'auto'有css则按照css来，否则就是instant
// 'start'表示btn2展示在可视区域最顶端、'end'表示btn2展示在可是区域最底端
btnToTop.scrollIntoView({ behavior: 'instant', block: 'end' })
})
// 让滚动条回到最顶端👆
btnToTop.addEventListener('click', function () {
// 方式2
document.documentElement.scrollTop = 0
// 方式3
window.scrollTo({
top: 0,
behavior: 'smooth',
})
// 方式4
btnToBottom.scrollIntoView({ behavior: 'instant', block: 'end' })
})
</script>
</body>
</html>
Scroll的CSS属性
::-webkit-scrollbar：整个滚动条
::-webkit-scrollbar-button：滚动条上的按钮（下下箭头）
::-webkit-scrollbar-thumb：滚动条上的滚动滑块
::-webkit-scrollbar-track：滚动条轨道
::-webkit-scrollbar-track-piece：滚动条没有滑块的轨道部分
::-webkit-scrollbar-corner：当同时有垂直和水平滚动条时交汇的部分
::-webkit-resizer：某些元素的交汇部分的部分样式（类似textarea的可拖动按钮）
::-webkit-scrollbar { // 滚动条样式
width: 6px;
height: 6px;
}
::-webkit-scrollbar-corner{
background-color: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #464C71;
}
::-webkit-scrollbar-track {
border-radius: 0;
background: #464C71;
}
scroll-behavior 这个属性，可以让我们的滚动更加平滑。
scroll-behavior: auto;
scroll-behavior: smooth;
CSS 滚动捕获 Scroll Snap
CSS 滚动捕获允许开发者通过声明一些位置(或叫作捕获位置)来创建精准控制的滚动体验. 通常来说轮播图就是这种体验的例子, 在轮播图中, 用户只能停在图 A 或者图 B, 而不能停在 A 和 B 的中间。
定义在滚动容器
scroll-snap-type: 定义滚动容器是否可以捕获、捕获是必须的还是可选的、捕获应该发生在横向滚动还是纵向滚动上.
scroll-padding: 定义滚动容器的捕获偏移.
定义在滚动容器中的元素上
scroll-snap-align: 滚动容器的子元素和滚动容器对齐方式, 顶部对齐、中间对齐还是底部对齐
scroll-margin: 滚动容器的子元素的滚动 margin.
scroll-snap-stop: 是否允许滑动超过应该捕获的位置. 比如当前屏幕是 A, 在手机屏幕上滑动很长的距离, 是否可以快速划过很多元素(B/C/D/E…)还是一定会停在下一个 B.
demo
<form action="">
<label for="normal">
<input type="radio" name="stop" id="normal" checked>
Normal
</label>
<label for="always">
<input type="radio" name="stop" id="always">
Always
</label>
</form>
<div class="section">
<div class="section__item bg-1">Item 1</div>
<div class="section__item bg-2">Item 2</div>
<div class="section__item bg-3">Item 3</div>
<div class="section__item bg-4">Item 4</div>
<div class="section__item bg-5">Item 5</div>
</div>
.section {
display: flex;
gap: 20px;
max-width: 450px;
overflow-x: auto;
scroll-snap-type: x mandatory;
box-shadow: 0 3px 10px 0 rgba(#000, 0.1);
-webkit-overflow-scrolling: touch;
scroll-padding: 1rem;
padding: 1rem;
margin: 3rem auto 0;
border-radius: 5px;
}
.section__item {
--stop: normal;
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 300px;
width: 30px;
height: 150px;
scroll-snap-align: start;
scroll-snap-stop: var(--stop);
background-color: #ccc;
font-size: 1.5rem;
}
/* Other styles */
body {
font-family: "Arial";
padding: 1rem;
background-color: #f7f7f7;
}
.bg-1 {
background-color: #f1c2c6;
}
.bg-2 {
background-color: #dac2f1;
}
.bg-3 {
background-color: #ccf1c2;
}
.bg-4 {
background-color: #c2e9f1;
}
.bg-5 {
background-color: #f1ebc2;
}
form {
text-align: center;
margin-top: 2rem;
label + label {
margin-left: 1rem;
}
}
let inputNormal = document.querySelector('input[id="normal"]');
let inputAlways = document.querySelector('input[id="always"]');
inputNormal.addEventListener("click", function () {
document
.querySelector(".section__item")
.style.setProperty("--stop", "normal");
});
inputAlways.addEventListener("click", function () {
document
.querySelector(".section__item")
.style.setProperty("--stop", "always");
});
详细
scroll-snap-type: x/y
scroll-snap-align: start/end/center
scroll-snap-type,scroll-snap-type: y mandatory,scroll-snap-type: y proximity;
none默认值。表示滚动时候忽略捕捉点，也就是我们平时使用的滚动。x捕捉水平定位点。y捕捉垂直平定位点。block捕捉和块状元素排列一个滚动方向的定位点。默认文档流下指的就是垂直轴。inline捕捉和内联元素排列一个滚动方向的定位点。默认文档流下指的就是水平轴。both横轴纵轴都捕捉。mandatorymandatory表示“强制”，可选参数。强制定位，无论是添加删除元素，或者滚动窗口较小，不足以放下子元素。proximityproximity表示“大约”，可选参数。可能会定位。这个值的作用表现比较玄乎，时间有限，我也没有弄透。大家可以对比下面这个demo，感受和mandatory属性值的不同。
scroll-snap-stop,scroll-snap-stop: always;支持少
normal默认值。可以忽略捕获位置。always不能忽略捕获位置。且必须定位到第一个捕获元素的位置。
这个属性很有用，可以保证我们每次只能滚动一屏，或者一个指定元素，而不会一下子滚多屏或多个元素，只可惜，根据我的测试，还没有浏览器支持（虽然属性合法，但并无行为发生）
scroll-snap-align，支持同时两个属性：scroll-snap-align: start end;
none默认值。不定义位置。start起始位置对齐，例如，垂直滚动，子元素和容器同上边缘对齐。end结束位置对齐，例如，垂直滚动，子元素和容器同下边缘对齐。center居中对齐。子元素中心和滚动容器中心一致。
滚动锚点反选实现
//监听滚动事件
$(window).scroll(function() {
if(navTime)clearTimeout(navTime);
if(navBool){
var mTime = new Date().getTime();
if((mTime - navTimeDate) > 1000){
navTimeDate = mTime;
navScrollLoop();
}
navTime = setTimeout(function() {
navScrollLoop();
}, 300);
}
});
//初始化，获取锚点位置数据
function navScrollInitDome(){
const count = navAll.childElementCount;
for (var i = 0; i < domIds.length; i++) {
const domNow = document.getElementById(domIds[i]);
var rect = domNow.getBoundingClientRect();
mDomsData.push(rect);
}
//初始化样式
navScrollLoop();
}
navScrollInitDome();
//处理滚动事件
var mDomsData = [];
const domIds = ['brief','strength','course','team','joinus'];
var navTime = 0;
var navTimeDate = 0;
function navScrollLoop(){
var value=$('body,html').scrollTop();
var mInd = 0;
for (var i = domIds.length -1; i >= 0; i--) {
if(value > mDomsData[i].top){
mInd = i;
break;
}
}
if(mInd !== navInd){
anchorPoint(mInd);
}
}
// 改变样式
function anchorPoint(ind, type) {
// 锚点跳转
if(type){
const mDom = document.getElementById(type);
if (mDom) mDom.scrollIntoView({behavior:'smooth',block:'start'});
navBool = false;
if(navButTime)clearTimeout(navButTime);
navButTime = setTimeout(function(){
navBool = true;
},1300);
}
navInd = ind;
// 锚点按钮样式
const navAll = document.getElementById('navAll');
const count = navAll.childElementCount;
for (var i = 0; i < count; i++) {
if (navAll == undefined || navAll.children[i] == undefined) {
continue;
} else {
navAll.children[i].classList.remove('nav_sele');
}
}
navAll.children[ind].classList.add("nav_sele");
}
