十一、Tailwind CSS基础学习笔记之 Tailwind CSS overscroll Behavior
hi，我是温新，一名PHPer
overscroll behavior 用于控制浏览器到达滚动区域边界时的行为的功能类。这个属性可以用来防止在有多个滚动区域的页面中出现不必要的滚动。
overscroll-auto
格式：<element></element>
说明：它用于将滚动行为设置为默认。即使到达元素的边界，整个页面也会连同元素一起滚动。它是默认值。
overscroll-contain
格式：<element></element>
说明:用来设置滚动行为，只对所使用的元素进行默认。在元素到达边界后进一步滚动，不会滚动它后面的元素。在相邻的滚动区域不会发生滚动链。
<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">html</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">lang</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"en"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">head</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">meta</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">charset</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"UTF-8"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">meta</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"viewport"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">content</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"width=device-width, initial-scale=1.0"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">link</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">href</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"../dist/mystyle.css"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">rel</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"stylesheet"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">head</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">body</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">class</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-center"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">h1</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">class</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-green-500 text-5xl font-bold"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span>Tailwind CSS overscroll-behavior<span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">h1</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">b</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span>Tailwind CSS overscroll-auto and overscroll-contain Class<span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">b</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">class</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"flex"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">class</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"bg-green-500 mx-24 p-4 w-1/3 text-justify overscroll-contain"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">class</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"bg-pink-500 p-2 w-1/4 h-24 overscroll-auto overflow-y-auto"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene, flaunting convention. Yeah, I know what you're thinking. What's this guy making such a big stink about old library books? Well, let me give you a hint, junior.</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">body</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">html</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span>
overscroll-none
格式：<element></element>
说明：防止目标区域的滚动触发父元素的滚动，也防止在滚动过容器的末端时产生”反弹”效果。
<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">html</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">lang</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"en"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">head</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">meta</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">charset</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"UTF-8"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">meta</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"viewport"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">content</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"width=device-width, initial-scale=1.0"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">link</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">href</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"../dist/mystyle.css"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">rel</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"stylesheet"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">head</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">body</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">class</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-center"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">h1</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">class</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-green-500 text-5xl font-bold"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span>Tailwind CSS overscroll-behavior<span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">h1</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">b</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span>Tailwind CSS overscroll-none Class<span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">b</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">class</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"flex"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">class</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"bg-green-500 mx-24 p-4 w-1/3 text-justify overscroll-contain"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">class</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"bg-pink-500 p-2 w-1/4 h-24 overscroll-none overflow-y-auto"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene, flaunting convention. Yeah, I know what you're thinking. What's this guy making such a big stink about old library books? Well, let me give you a hint, junior.</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">body</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">html</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span>
overscroll-y-none
格式：<element></element>
说明：Y 轴上不出现滚动条，超出容器范围的内家溢出且显示。
请登录后再评论