text: (window.webpackJsonp=window.webpackJsonp||[]).push([[100],{665:function(s,t,a){"use strict";a.r(t);var n=a(12),r=Object(n.a)({},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":s.$parent.slotKey}},[a("h1",{attrs:{id:"简单盘点浏览器的几种滚动行为"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#简单盘点浏览器的几种滚动行为","aria-hidden":"true"}},[s._v("#")]),s._v(" 简单盘点浏览器的几种滚动行为")]),s._v(" "),a("blockquote",[a("p",[a("a",{attrs:{href:"https://xiaotianxia.github.io/blog/vuepress/js/scroll_behaviors.html?_=2625346544",target:"_blank",rel:"noopener noreferrer"}},[s._v("原文地址"),a("OutboundLink")],1)])]),s._v(" "),a("p",[s._v("这两天了解到了浏览器的几个滚动相关的属性和方法。感觉还挺有意思的，而且几个属性、方法的结合使用，可以大大改善用户体验。\n写篇文章“蜻蜓点水”地简单概述一下供大家了解，如果想深入研究，还请查阅更详尽的资料。")]),s._v(" "),a("h2",{attrs:{id:"一，-scroll-behavior-smooth"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#一，-scroll-behavior-smooth","aria-hidden":"true"}},[s._v("#")]),s._v(" 一， scroll-behavior: smooth")]),s._v(" "),a("blockquote",[a("p",[s._v("让页面或元素的滚动如丝般柔滑。")])]),s._v(" "),a("div",{staticClass:"language-css line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[s._v("scroll-behavior")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" smooth | auto"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n")])]),s._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[s._v("1")]),a("br")])]),a("h3",{attrs:{id:"demo-🌰↓"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#demo-🌰↓","aria-hidden":"true"}},[s._v("#")]),s._v(" demo 🌰↓")]),s._v(" "),a("p",[s._v("看右下角↘\n"),a("scroll-to-top")],1),s._v(" "),a("p",[s._v("就一行代码：")]),s._v(" "),a("div",{staticClass:"language-css line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[s._v("html,\nbody")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n\t"),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("scroll-behavior")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" smooth"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])]),s._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[s._v("1")]),a("br"),a("span",{staticClass:"line-number"},[s._v("2")]),a("br"),a("span",{staticClass:"line-number"},[s._v("3")]),a("br"),a("span",{staticClass:"line-number"},[s._v("4")]),a("br")])]),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[s._v("document"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("scrollingElement"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("scrollTop "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// or window.scrollTo(0, 0);")]),s._v("\n")])]),s._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[s._v("1")]),a("br"),a("span",{staticClass:"line-number"},[s._v("2")]),a("br")])]),a("h2",{attrs:{id:"二，-scroll-、-scrollto-、-scrollby-、-scrollintoview"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#二，-scroll-、-scrollto-、-scrollby-、-scrollintoview","aria-hidden":"true"}},[s._v("#")]),s._v(" 二， .scroll()、 .scrollTo()、 .scrollBy()、 .scrollIntoView()")]),s._v(" "),a("blockquote",[a("p",[s._v("几个滚动方法")])]),s._v(" "),a("p",[s._v("同样，几个有关滚动的js方法也可以添加类似 scroll-behavior: smooth 的参数已达到平滑滚动效果 —— scroll、scrollTo、scrollBy、scrollIntoView(scrollIntoView 稍有不同，下面会单独说)。")]),s._v(" "),a("p",[s._v("scroll(x, y)、 scrollTo(x, y)、 scrollBy(x, y)标识分别沿着x和y轴滚动的距离。")]),s._v(" "),a("p",[s._v("它们还都可以以一个scrollOptions对象作为参数，")]),s._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[s._v("scrollOptions "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n  \ttop"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n  \tleft"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n  \tbehavior"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'smooth'")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("//平滑滚动")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n")])]),s._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[s._v("1")]),a("br"),a("span",{staticClass:"line-number"},[s._v("2")]),a("br"),a("span",{staticClass:"line-number"},[s._v("3")]),a("br"),a("span",{staticClass:"line-number"},[s._v("4")]),a("br"),a("span",{staticClass:"line-number"},[s._v("5")]),a("br")])]),a("h3",{attrs:{id:"demo-🌰↓-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#demo-🌰↓-2","aria-hidden":"true"}},[s._v("#")]),s._v(" demo 🌰↓")]),s._v(" "),a("Scroll-ScrollMethods"),s._v(" "),a("p",[s._v("主要代码：")]),s._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("scrollWrapper"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("scrollTo")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n\ttop"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("queryParams"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("top"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n\tleft"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("queryParams"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("left"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n\tbehavior"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("queryParams"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("smooth "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'smooth'")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'auto'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n")])]),s._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[s._v("1")]),a("br"),a("span",{staticClass:"line-number"},[s._v("2")]),a("br"),a("span",{staticClass:"line-number"},[s._v("3")]),a("br"),a("span",{staticClass:"line-number"},[s._v("4")]),a("br"),a("span",{staticClass:"line-number"},[s._v("5")]),a("br")])]),a("h2",{attrs:{id:"三，-scrollintoview"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#三，-scrollintoview","aria-hidden":"true"}},[s._v("#")]),s._v(" 三， .scrollIntoView()")]),s._v(" "),a("blockquote",[a("p",[s._v("让元素滚到可视区。")])]),s._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[s._v("element"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("scrollIntoView")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("alignToTop"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\nelement"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("scrollIntoView")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n\tblock"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'start'")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("|")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'end'")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("|")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'center'")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("|")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'nearest'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" \n\tinline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'start'")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("|")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'end'")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("|")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'center'")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("|")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'nearest'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" \n\tbehavior"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'smooth'")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("|")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'auto'")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n")])]),s._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[s._v("1")]),a("br"),a("span",{staticClass:"line-number"},[s._v("2")]),a("br"),a("span",{staticClass:"line-number"},[s._v("3")]),a("br"),a("span",{staticClass:"line-number"},[s._v("4")]),a("br"),a("span",{staticClass:"line-number"},[s._v("5")]),a("br"),a("span",{staticClass:"line-number"},[s._v("6")]),a("br")])]),a("ul",[a("li",[a("strong",[s._v("alignToTop")]),s._v(" 一个Boolean值")]),s._v(" "),a("li",[s._v("true，默认值，相当于 scrollIntoViewOptions: {block: 'start', inline: 'nearest'}，元素的顶端将和其所在滚动区的可视区域的顶端对齐")]),s._v(" "),a("li",[s._v("false，相当于 scrollIntoViewOptions: {block: 'end', inline: 'nearest'}，元素的底端将和其所在滚动区的可视区域的底端对齐")])]),s._v(" "),a("h3",{attrs:{id:"demo-🌰↓-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#demo-🌰↓-3","aria-hidden":"true"}},[s._v("#")]),s._v(" demo 🌰↓")]),s._v(" "),a("Scroll-ScrollIntoView"),s._v(" "),a("div",{staticClass:"warning custom-block"},[a("p",{staticClass:"custom-block-title"},[s._v("注意")]),s._v(" "),a("p",[s._v("从demo中可以看出，小红块的滚动也会导致整个页面的滚动，这一点的用户体验稍微差一点。不知道大家有没有办法解决这个问题，还望赐教...")])]),s._v(" "),a("h2",{attrs:{id:"四，-overscroll-behavior-contain"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#四，-overscroll-behavior-contain","aria-hidden":"true"}},[s._v("#")]),s._v(" 四， overscroll-behavior: contain;")]),s._v(" "),a("blockquote",[a("p",[s._v("多滚动区域，滚动不传播。")])]),s._v(" "),a("div",{staticClass:"language-css line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[s._v("overscroll-behavior")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" contain | auto | none"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("overscroll-behavior-x")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" contain | auto | none"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("overscroll-behavior-y")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" contain | auto | none"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n")])]),s._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[s._v("1")]),a("br"),a("span",{staticClass:"line-number"},[s._v("2")]),a("br"),a("span",{staticClass:"line-number"},[s._v("3")]),a("br")])]),a("ul",[a("li",[s._v("auto - 默认。元素的滚动会传播给祖先元素。")]),s._v(" "),a("li",[s._v("contain - 阻止滚动链接，滚动不会传播给祖先。")]),s._v(" "),a("li",[s._v("none - 和 contain 效果一样。")])]),s._v(" "),a("h3",{attrs:{id:"demo-🌰↓-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#demo-🌰↓-4","aria-hidden":"true"}},[s._v("#")]),s._v(" demo 🌰↓")]),s._v(" "),a("p",[s._v("滚动到底感受一下~\n"),a("Scroll-Overscroll"),s._v("\n只需要在滚动容易上加一行代码：")],1),s._v(" "),a("div",{staticClass:"language-css line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[s._v("overscroll-behavior")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" contain"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n")])]),s._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[s._v("1")]),a("br")])]),a("p",[s._v("在此之前，张鑫旭大大就已经试图用js解决这个问题，猛点"),a("a",{attrs:{href:"https://www.zhangxinxu.com/study/201512/inner-scroll-prevent-parent-scroll.html",target:"_blank",rel:"noopener noreferrer"}},[s._v("这里"),a("OutboundLink")],1),s._v("。")]),s._v(" "),a("h2",{attrs:{id:"五，-scroll-snap"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#五，-scroll-snap","aria-hidden":"true"}},[s._v("#")]),s._v(" 五， scroll-snap-*")]),s._v(" "),a("blockquote",[a("p",[s._v("规范滚动元素的定位")])]),s._v(" "),a("h3",{attrs:{id:"demo-🌰↓-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#demo-🌰↓-5","aria-hidden":"true"}},[s._v("#")]),s._v(" demo 🌰↓")]),s._v(" "),a("Scroll-ScrollSnaps"),s._v(" "),a("p",[s._v("主要代码：")]),s._v(" "),a("div",{staticClass:"language-css line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[s._v(".container.y-mandatory")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("scroll-snap-type")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" y mandatory"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v(" \n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[s._v(".container.y-proximity")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("scroll-snap-type")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" y proximity"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[s._v(".container.x-mandatory")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("scroll-snap-type")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" x mandatory"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[s._v(".container.x-proximity")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("scroll-snap-type")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" x proximity"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[s._v(".y > .scroll-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n\t"),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("scroll-snap-align")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" start"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[s._v(".x > .scroll-item")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n\t"),a("span",{pre:!0,attrs:{class:"token property"}},[s._v("scroll-snap-align")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" center"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])]),s._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[s._v("1")]),a("br"),a("span",{staticClass:"line-number"},[s._v("2")]),a("br"),a("span",{staticClass:"line-number"},[s._v("3")]),a("br"),a("span",{staticClass:"line-number"},[s._v("4")]),a("br"),a("span",{staticClass:"line-number"},[s._v("5")]),a("br"),a("span",{staticClass:"line-number"},[s._v("6")]),a("br"),a("span",{staticClass:"line-number"},[s._v("7")]),a("br"),a("span",{staticClass:"line-number"},[s._v("8")]),a("br"),a("span",{staticClass:"line-number"},[s._v("9")]),a("br"),a("span",{staticClass:"line-number"},[s._v("10")]),a("br"),a("span",{staticClass:"line-number"},[s._v("11")]),a("br"),a("span",{staticClass:"line-number"},[s._v("12")]),a("br"),a("span",{staticClass:"line-number"},[s._v("13")]),a("br"),a("span",{staticClass:"line-number"},[s._v("14")]),a("br"),a("span",{staticClass:"line-number"},[s._v("15")]),a("br"),a("span",{staticClass:"line-number"},[s._v("16")]),a("br"),a("span",{staticClass:"line-number"},[s._v("17")]),a("br"),a("span",{staticClass:"line-number"},[s._v("18")]),a("br")])]),a("ul",[a("li",[a("strong",[s._v("mandatory")]),s._v("： 强制，强制地定位到某个滚动元素")]),s._v(" "),a("li",[a("strong",[s._v("proximity")]),s._v("：邻近，个人理解是：只有当某个滚动元素“"),a("strong",[s._v("足够")]),s._v("”进入滚动容器的时候才会控制定位")]),s._v(" "),a("li",[s._v("这两个概念在使用上略有差异，可以多看几个例子感受一下")])]),s._v(" "),a("p",[s._v("这个属性还是很有用的，可以用纯CSS来实现各种多平滚动效果，这里只是简单地体验了一下。\n更多例子见该"),a("a",{attrs:{href:"https://css-tricks.com/practical-css-scroll-snapping/",target:"_blank",rel:"noopener noreferrer"}},[s._v("文章"),a("OutboundLink")],1)]),s._v(" "),a("h2",{attrs:{id:"六，-history-scrollrestoration"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#六，-history-scrollrestoration","aria-hidden":"true"}},[s._v("#")]),s._v(" 六， history.scrollRestoration")]),s._v(" "),a("blockquote",[a("p",[s._v("设置返回页面是否返回原滚动位置")])]),s._v(" "),a("p",[s._v("在从页面跳转回来的时候，一般浏览器都会“贴心”地返回到该页面原来的滚动位置，该行为由 history.scrollRestoration 属性控制的，默认是“auto”，")]),s._v(" "),a("p",[s._v("若不想回到原来的位置，可将值设为“manual”，手动，即不返回原位置，而是手动返回，此时浏览器会返回到页面顶部。但据测试，“返回”都是瞬间的，即使设置了 scroll-behavior: smooth 也无效。")]),s._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("if")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'scrollRestoration'")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("in")]),s._v(" history"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n  \thistory"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("scrollRestoration "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'manual'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])]),s._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[s._v("1")]),a("br"),a("span",{staticClass:"line-number"},[s._v("2")]),a("br"),a("span",{staticClass:"line-number"},[s._v("3")]),a("br")])]),a("h2",{attrs:{id:"参考资料"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#参考资料","aria-hidden":"true"}},[s._v("#")]),s._v(" 参考资料")]),s._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView",target:"_blank",rel:"noopener noreferrer"}},[s._v("scrollIntoView"),a("OutboundLink")],1)]),s._v(" "),a("li",[a("a",{attrs:{href:"https://www.w3.org/TR/css-scroll-snap-1/",target:"_blank",rel:"noopener noreferrer"}},[s._v("CSS Scroll Snap Module Level 1"),a("OutboundLink")],1)]),s._v(" "),a("li",[a("a",{attrs:{href:"https://css-tricks.com/practical-css-scroll-snapping/",target:"_blank",rel:"noopener noreferrer"}},[s._v("https://css-tricks.com/practical-css-scroll-snapping/"),a("OutboundLink")],1)]),s._v(" "),a("li",[a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type",target:"_blank",rel:"noopener noreferrer"}},[s._v("https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type"),a("OutboundLink")],1)]),s._v(" "),a("li",[a("a",{attrs:{href:"https://segmentfault.com/a/1190000012014962",target:"_blank",rel:"noopener noreferrer"}},[s._v("使用 CSS overscroll-behavior 控制滚动行为：自定义下拉刷新和溢出效果"),a("OutboundLink")],1)]),s._v(" "),a("li",[a("a",{attrs:{href:"https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration",target:"_blank",rel:"noopener noreferrer"}},[s._v("History API: Scroll Restoration"),a("OutboundLink")],1)])])],1)},[],!1,null,null,null);t.default=r.exports}}]);