04 【布局之Overscroll Behavior 定位偏移量】

最新推荐文章于 2024-06-29 18:41:58 发布

DSelegent

最新推荐文章于 2024-06-29 18:41:58 发布

阅读量404

点赞数

分类专栏： TailWind CSS学习笔记文章标签： html 前端 css tailwind

本文链接：https://blog.csdn.net/DSelegent/article/details/126612820

版权

本文探讨CSS布局中的Overscroll Behavior特性，如何阻止父元素过度滚动和过度滚动反弹。同时介绍如何在不同状态和断点下有条件地应用布局效果，以实现更精细的网页滚动控制。

摘要由CSDN通过智能技术生成

1.布局-Overscroll Behavior

overscroll behavior 用于控制浏览器到达滚动区域边界时的行为的功能类。这个属性可以用来防止在有多个滚动区域的页面中出现不必要的滚动。

1.1 快速参考

Class	Properties
overscroll-auto	overscroll-behavior: auto;
overscroll-contain	overscroll-behavior: contain;
overscroll-none	overscroll-behavior: none;
overscroll-y-auto	overscroll-behavior-y: auto;
overscroll-y-contain	overscroll-behavior-y: contain;
overscroll-y-none	overscroll-behavior-y: none;
overscroll-x-auto	overscroll-behavior-x: auto;
overscroll-x-contain	overscroll-behavior-x: contain;
overscroll-x-none	overscroll-behavior-x: none;

1.2 基本用法

1.2.1 阻止父元素的过度滚动

overscroll-auto
说明：它用于将滚动行为设置为默认。即使到达元素的边界，整个页面也会连同元素一起滚动。它是默认值。

overscroll-contain
说明:用来设置滚动行为，只对所使用的元素进行默认。在元素到达边界后进一步滚动，不会滚动它后面的元素。在相邻的滚动区域不会发生滚动链。

<html lang="en">
  <head>
    <link rel="stylesheet" href="../dist/output.css" />
  </head>
  <body class="text-center">
    <h1 class="text-green-500 text-5xl font-bold">Tailwind CSS overscroll-behavior</h1>
    <b>Tailwind CSS overscroll-auto and overscroll-contain Class</b>
    <div class="flex">
      <div
        class="bg-green-500 mx-24 p-4 w-1/3 h-16 overscroll-contain overflow-y-auto text-justify"
      >
        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.
      </div>

      <div class="bg-pink-500 p-2 w-1/4 h-24 overscroll-auto overflow-y-auto">
        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.
      </div>
    </div>
    <div class="h-[2000px]"></div>
  </body>
</html>