{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-overscroll-behaviour/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"c9f94b7c-f6b6-55d5-9179-0ec604951211","title":"Tailwind CSS Overscroll Behaviour","slug":"/classes/tailwind-overscroll-behaviour/"},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"lastUpdated\": \"8 May 2024\",\n  \"title\": \"Tailwind CSS Overscroll Behaviour\",\n  \"metaTitle\": \"Tailwind CSS Overscroll Behaviour\",\n  \"metaDescription\": \"The overscroll-{behavior} utility class in Tailwind CSS allows you to control the behavior of scrollable elements when they reach their scroll boundaries.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-overscroll-behaviour\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Tailwind Overscroll Behaviour\"), mdx(\"p\", null, \"The overscroll-{behavior} utility class in Tailwind CSS allows you to control the behavior of scrollable elements when they reach their scroll boundaries. With Tailwind's overscroll-{behavior} class, you can customize how the content scrolls or bounces at the edges of the scrollable container.\"), mdx(\"h2\", null, \"Applying Overscroll Behavior\"), mdx(\"p\", null, \"To apply a specific overscroll behavior to an element, you can use the overscroll-{behavior} utility class, where {behavior} represents the desired behavior. The available behaviors are:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"overscroll-auto: Allows the default overscroll behavior defined by the browser. It may exhibit scroll bounce or rubber-band effect on supported platforms.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"overscroll-contain: Prevents the overscroll effect and limits the scroll movement to the scrollable container only.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"overscroll-none: Disables the overscroll effect completely, preventing any bounce or rubber-band effect.\\nHere's an example:\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"overscroll-auto\\\">\\n  <!-- Scrollable content here -->\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-xl relative overflow-auto bg-purple-50 p-10\"\n  }, mdx(\"div\", {\n    className: \"mx-4 overscroll-auto overflow-auto h-48 bg-purple-100 dark:bg-slate-800 shadow-xl p-8 space-y-4 text-purple-700 text-sm sm:text-base\"\n  }, mdx(\"p\", null, \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur iste, error expedita vel rerum ipsam adipisci voluptates distinctio magnam assumenda eius vero! Quod consequatur incidunt nulla deleniti impedit iste ex. Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim labore, recusandae consectetur, illo minus repellendus voluptatem sed aut sapiente asperiores eos. Cumque, libero quibusdam itaque sit recusandae molestiae illo cupiditate. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam suscipit dolor neque recusandae, eaque repellat saepe eveniet, libero voluptate nisi sint ipsum facere corrupti obcaecati explicabo ratione quam error? Cumque?\"))), mdx(\"h2\", null, \"Responsive Overscroll Behavior\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply overscroll behavior classes responsively at different breakpoints. To use responsive overscroll behavior classes, you can append the breakpoint prefix to the utility class. For example, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:overscroll-contain\"), \" sets the overscroll behavior to overscroll-contain starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"overscroll-auto md:overscroll-contain\\\">\\n  <!-- Scrollable content here -->\\n</div>\\n\")), mdx(\"p\", null, \"In the above example, the overscroll behavior of the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<div>\"), \" element is set to overscroll-auto by default, but starting from the medium breakpoint and above, it changes to overscroll-contain.\"), mdx(\"h2\", null, \"Tailwind Overscroll Behaviour Class Table\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overscroll-auto\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overscroll-behavior: auto;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overscroll-contain\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overscroll-behavior: contain;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overscroll-none\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overscroll-behavior: none;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overscroll-y-auto\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overscroll-behavior-y: auto;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overscroll-y-contain\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overscroll-behavior-y: contain;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overscroll-y-none\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overscroll-behavior-y: none;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overscroll-x-auto\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overscroll-behavior-x: auto;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overscroll-x-contain\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overscroll-behavior-x: contain;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overscroll-x-none\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overscroll-behavior-x: none;\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.windframe.dev/editor?id=pricing2\"\n  }, \"Pricing\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-overscroll-behaviour","title":"Tailwind Overscroll Behaviour","items":[{"url":"#applying-overscroll-behavior","title":"Applying Overscroll Behavior"},{"url":"#preview","title":"Preview"},{"url":"#responsive-overscroll-behavior","title":"Responsive Overscroll Behavior"},{"url":"#tailwind-overscroll-behaviour-class-table","title":"Tailwind Overscroll Behaviour Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-overscroll-behaviour.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind CSS Overscroll Behaviour","lastUpdated":"8 May 2024","metaDescription":"The overscroll-{behavior} utility class in Tailwind CSS allows you to control the behavior of scrollable elements when they reach their scroll boundaries."}}},"pageContext":{"id":"c9f94b7c-f6b6-55d5-9179-0ec604951211"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}