1"use strict";(self.webpackChunkcode_fictionist=self.webpackChunkcode_fictionist||[]).push([[4482],{16192:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>t,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"series/iThome_2024/day_26","title":"Day 26 - \u5143\u7d20\u5340\u584a\u6372\u52d5\u6548\u679c","description":"\u5148\u4f86\u89e3\u91cb\u4e00\u4e0b\u9019\u500b\u6548\u679c\u5230\u5e95\u662f\u4ec0\u9ebc\u3002","source":"@site/docs/series/01-iThome_2024/26-day_26.mdx","sourceDirName":"series/01-iThome_2024","slug":"/series/iThome_2024/day_26","permalink":"/docs/series/iThome_2024/day_26","draft":false,"unlisted":false,"tags":[],"version":"current","lastUpdatedAt":1766374113000,"sidebarPosition":26,"frontMatter":{"title":"Day 26 - \u5143\u7d20\u5340\u584a\u6372\u52d5\u6548\u679c"},"sidebar":"series","previous":{"title":"Day 25 - \u5143\u7d20\u61f8\u505c\u6d6e\u7a7a\u6548\u679c","permalink":"/docs/series/iThome_2024/day_25"},"next":{"title":"Day 27 - \u6d6e\u96d5\u6548\u679c","permalink":"/docs/series/iThome_2024/day_27"}}');var o=s(74848),l=s(28453);const t={title:"Day 26 - \u5143\u7d20\u5340\u584a\u6372\u52d5\u6548\u679c"},i=void 0,c={},d=[{value:"\u5143\u7d20\u5340\u584a\u6372\u52d5\u6548\u679c",id:"\u5143\u7d20\u5340\u584a\u6372\u52d5\u6548\u679c",level:2},{value:"Reference",id:"reference",level:2}];function a(e){const n={a:"a",br:"br",code:"code",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",...(0,l.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(n.p,{children:["\u5148\u4f86\u89e3\u91cb\u4e00\u4e0b\u9019\u500b\u6548\u679c\u5230\u5e95\u662f\u4ec0\u9ebc\u3002",(0,o.jsx)(n.br,{}),"\n","\u6211\u5011\u5728 Day 21 \u4ecb\u7d39\u7684\u5e73\u6ed1\u6efe\u52d5\u6548\u679c\u662f\u6307\u7576\u4f7f\u7528\u8005\u9ede\u64ca\u9801\u9762\u4e0a\u7684\u9328\u9ede\u9023\u7d50\u6642\uff0c\u700f\u89bd\u5668\u6703\u81ea\u52d5\u6efe\u52d5\u5230\u76ee\u6a19\u4f4d\u7f6e\uff0c\u4e26\u4e14\u6703\u6709\u4e00\u500b\u5e73\u6ed1\u7684\u904e\u6e21\u6548\u679c\u3002",(0,o.jsx)(n.br,{}),"\n","\u800c\u4eca\u5929\u8981\u8b1b\u7684\u5143\u7d20\u5340\u584a\u6372\u52d5\u6548\u679c\u5247\u662f\u7576\u4f7f\u7528\u8005",(0,o.jsx)(n.strong,{children:"\u8f15\u8f15"}),"\u6efe\u4e00\u4e0b\u6efe\u8f2a\u6642\uff0c\u700f\u89bd\u5668\u81ea\u52d5\u6372\u5230\u4e0b\u4e00\u500b\u5143\u7d20\u5340\u584a\uff0c\u800c\u4e14\u4e00\u6a23\u6703\u6709\u4e00\u500b\u5e73\u6ed1\u7684\u904e\u6e21\u6548\u679c\u3002"]}),"\n",(0,o.jsxs)(n.p,{children:["\u5728\u4e00\u822c\u60c5\u6cc1\u4e0b\uff0c\u9019\u7a2e\u6548\u679c\u901a\u5e38\u53c8\u53eb\u6574\u9801\u5f0f\u6efe\u52d5 (fullpage scroll)\uff0c\u7db2\u8def\u4e0a\u6709\u6bd4\u5982 ",(0,o.jsx)(n.a,{href:"https://alvarotrigo.com/fullPage/",children:"fullPage.js"})," \u9019\u6a23\u7684\u5957\u4ef6\u4f86\u5be6\u73fe\u9019\u500b\u6548\u679c\u3002",(0,o.jsx)(n.br,{}),"\n","\u4f46\u5176\u5be6\u518d\u4e0d\u88dd\u5957\u4ef6\u7684\u60c5\u6cc1\u4e0b\uff0c\u6211\u5011\u53ef\u4ee5\u900f\u904e ",(0,o.jsx)(n.code,{children:"scroll-snap-type"})," \u8ddf ",(0,o.jsx)(n.code,{children:"scroll-snap-align"})," \u9019\u5169\u500b CSS \u5c6c\u6027\u4f86\u5be6\u73fe\u9019\u500b\u6548\u679c\u3002",(0,o.jsx)(n.br,{}),"\n","\u7576\u7136\u9019\u5169\u500b\u5c6c\u6027\u4e0d\u53ea\u53ef\u4ee5\u505a fullpage scroll\uff0c\u4e5f\u53ef\u4ee5\u7528\u5728\u4e00\u822c\u7684\u5340\u584a\u6372\u52d5\u6548\u679c\u4e0a\u3002"]}),"\n",(0,o.jsx)(n.h2,{id:"\u5143\u7d20\u5340\u584a\u6372\u52d5\u6548\u679c",children:"\u5143\u7d20\u5340\u584a\u6372\u52d5\u6548\u679c"}),"\n",(0,o.jsx)(n.p,{children:"\u4e00\u6a23\u5148\u4f86\u770b code\uff1a"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-html",children:'<div class="container">\n <div class="section">Section 1</div>\n <div class="section">Section 2</div>\n <div class="section">Section 3</div>\n</div>\n'})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-css",children:".container {\n width: 100vw;\n height: 100vh;\n overflow-y: scroll;\n scroll-snap-type: y mandatory;\n}\n\n.section {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 5rem;\n background-color: lightpink;\n scroll-snap-align: center;\n}\n\n.section:nth-of-type(2) {\n background-color: lightblue;\n}\n\n.section:nth-of-type(3) {\n background-color: lightyellow;\n}\n"})}),"\n",(0,o.jsx)("iframe",{height:"600",width:"100%",title:"day 26 - smooth_scroll",src:"https://codepen.io/ChungYingHo/embed/XWLogdN?default-tab=html%2Cresult",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true",children:(0,o.jsxs)(n.p,{children:["See the Pen ",(0,o.jsx)("a",{href:"https://codepen.io/ChungYingHo/pen/XWLogdN",children:"\nday 26 - smooth_scroll"})," by ChungYingHo (",(0,o.jsx)("a",{href:"https://codepen.io/ChungYingHo",children:"@ChungYingHo"}),")\non ",(0,o.jsx)("a",{href:"https://codepen.io",children:"CodePen"}),"."]})}
1),"\n",(0,o.jsx)(n.p,{children:"\u5728\u9019\u88e1\u6709\u5e7e\u500b\u91cd\u9ede\uff1a"}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:".container"})," \u9664\u4e86\u8981\u8a2d\u5b9a ",(0,o.jsx)(n.code,{children:"scroll-snap-type: y mandatory;"})," \u4e4b\u5916\uff0c\u4e5f\u8981\u7d66\u4e88",(0,o.jsx)(n.strong,{children:"\u660e\u78ba\u7684\u5bec\u9ad8"}),"\u4e26\u8a2d\u5b9a ",(0,o.jsx)(n.code,{children:"overflow-y: scroll;"}),"\uff0c\u9019\u6a23\u624d\u80fd\u8b93\u6372\u52d5\u6548\u679c\u6b63\u78ba\u904b\u4f5c\u3002"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:".section"})," \u8981\u8a2d\u5b9a ",(0,o.jsx)(n.code,{children:"scroll-snap-align: center;"}),"\uff0c\u9019\u6a23\u7576\u6372\u52d5\u6642\uff0c\u6703\u81ea\u52d5\u5c0d\u9f4a\u5230\u4e2d\u5fc3\u3002(\u4e5f\u53ef\u4ee5\u8a2d\u5b9a\u5230 start \u6216 end\uff0c\u770b\u4f60\u500b\u4eba\u9700\u6c42)"]}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:["\u95dc\u65bc ",(0,o.jsx)(n.code,{children:"scroll-snap-type"})," \u5c6c\u6027\uff0c\u6709\u5169\u500b\u503c\u53ef\u4ee5\u8a2d\u5b9a\uff0c\u5206\u5225\u662f",(0,o.jsx)(n.strong,{children:"\u8ef8\u5411"}),"\u548c",(0,o.jsx)(n.strong,{children:"\u5f37\u5236\u6027"})," (snap strictness)\uff0c\u6211\u5011\u9019\u88e1\u8a2d\u5b9a\u7684\u662f ",(0,o.jsx)(n.code,{children:"y mandatory"}),"\uff0c\u4ee3\u8868\u8457\u7576\u4f7f\u7528\u8005\u6efe\u52d5\u6efe\u8f2a\u6642\uff0c\u6703\u5f37\u5236\u6372\u52d5\u5230\u4e0b\u4e00\u500b\u5143\u7d20\u5340\u584a\u3002",(0,o.jsx)(n.br,{}),"\n","\u800c\u5b50\u5143\u7d20\u7684 ",(0,o.jsx)(n.code,{children:"scroll-snap-align"})," \u5c6c\u6027\u5247\u662f\u7528\u4f86\u8a2d\u5b9a\u6372\u52d5\u6642\u7684\u5c0d\u9f4a\u65b9\u5f0f\uff0c\u9019\u88e1\u6211\u5011\u8a2d\u5b9a\u7684\u662f ",(0,o.jsx)(n.code,{children:"center"}),"\uff0c\u4ee3\u8868\u8457\u6372\u52d5\u6642\u6703\u5c0d\u9f4a\u5230\u4e2d\u5fc3\u3002"]}),"\n",(0,o.jsx)(n.h2,{id:"reference",children:"Reference"}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type",children:"MDN - scroll-snap-type"})}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}},28453:(e,n,s)=>{s.d(n,{R:()=>t,x:()=>i});var r=s(96540);const o={},l=r.createContext(o);function t(e){const n=r.useContext(l);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:t(e.components),r.createElement(l.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.