Docs Hub

DownloadsLaravelLaravelLivewireLivewireAlpine.jsAlpine.jsNext.jsNext.jsVue.jsVue.jsZustandZustandNuxt.jsNuxt.jsFilamentFilamentVite.jsVite.jsNest.jsNest.jsBootstrapBootstrapTailwindCSSTailwindCSSدرحال بازسازی
ReactReact
راه های ارتباطی با ما

Docs Hub

Tailwind CSSTailwind CSS
Accent ColorAdding Custom StylesAlign ContentAlign ItemsAlign SelfAnimationAppearanceAspect RatioBackdrop FilterBackdrop Filter BlurBackdrop Filter BrightnessBackdrop Filter ContrastBackdrop Filter GrayscaleBackdrop Filter Hue RotateBackdrop Filter InvertBackdrop Filter OpacityBackdrop Filter SaturateBackdrop Filter SepiaBackface VisibilityBackground AttachmentBackground Blend ModeBackground ClipBackground ColorBackground ImageBackground OriginBackground PositionBackground RepeatBackground SizeBlock SizeBorder CollapseBorder ColorBorder RadiusBorder SpacingBorder StyleBorder WidthBox Decoration BreakBox ShadowBox SizingBreak AfterBreak BeforeBreak InsideCaption SideCaret ColorClearColorColor SchemeColorsColumnsCompatibilityContentCursorDark ModeDetecting Classes In Source FilesDisplayEditor SetupField SizingFillFilterFilter BlurFilter BrightnessFilter ContrastFilter Drop ShadowFilter GrayscaleFilter Hue RotateFilter InvertFilter SaturateFilter SepiaFlexFlex BasisFlex DirectionFlex GrowFlex ShrinkFlex WrapFloatFont FamilyFont Feature SettingsFont SizeFont SmoothingFont StretchFont StyleFont Variant NumericFont WeightForced Color AdjustFunctions And DirectivesGapGrid Auto ColumnsGrid Auto FlowGrid Auto RowsGrid ColumnGrid RowGrid Template ColumnsGrid Template RowsHeightHover Focus And Other StatesHyphensInline SizeIsolationJustify ContentJustify ItemsJustify SelfLetter SpacingLine ClampLine HeightList Style ImageList Style PositionList Style TypeMarginMask ClipMask CompositeMask ImageMask ModeMask OriginMask PositionMask RepeatMask SizeMask TypeMax Block SizeMax HeightMax Inline SizeMax WidthMin Block SizeMin HeightMin Inline SizeMin WidthMix Blend ModeObject FitObject PositionOpacityOrderOutline ColorOutline OffsetOutline StyleOutline WidthOverflowOverflow WrapOverscroll BehaviorPaddingPerspectivePerspective OriginPlace ContentPlace ItemsPlace SelfPointer EventsPositionPreflightResizeResponsive DesignRotateScaleScroll BehaviorScroll MarginScroll PaddingScroll Snap AlignScroll Snap StopScroll Snap TypeSkewStrokeStroke WidthStyling With Utility ClassesTable LayoutText AlignText Decoration ColorText Decoration LineText Decoration StyleText Decoration ThicknessText IndentText OverflowText ShadowText TransformText Underline OffsetText WrapThemeTop Right Bottom LeftTouch ActionTransformTransform OriginTransform StyleTransition BehaviorTransition DelayTransition DurationTransition PropertyTransition Timing FunctionTranslateUpgrade GuideUser SelectVertical AlignVisibilityWhite SpaceWidthWill ChangeWord BreakZ Index
Docs Hub

scroll-behavior

Utilities for controlling the scroll behavior of an element.

Examples

Using smooth scrolling

Use the scroll-smooth utility to enable smooth scrolling within an element:

html
<!-- [!code classes:scroll-smooth] -->
<html class="scroll-smooth">
  <!-- ... -->
</html>

Setting the scroll-behavior only affects scroll events that are triggered by the browser.

Using normal scrolling

Use the scroll-auto utility to revert to the default browser behavior for scrolling:

html
<!-- [!code classes:scroll-auto] -->
<html class="scroll-smooth md:scroll-auto">
  <!-- ... -->
</html>