diff --git a/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor b/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor
index c5f1badc5a3..8d2844abe3a 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor
@@ -59,6 +59,18 @@
+
+
+
+
+
@Localizer["Content"]
+
+
+
+
+
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor.cs
index 2e4ed87b4b9..8bdbadad442 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor.cs
@@ -57,6 +57,10 @@ private void OpenDrawer()
private void OpenKeyboardDrawer() => IsKeyboardOpen = true;
+ private bool IsBodyScrollOpen { get; set; }
+
+ private void OpenBodyScrollDrawer() => IsBodyScrollOpen = true;
+
private async Task DrawerServiceShow() => await DrawerService.Show(new DrawerOption()
{
Placement = Placement.Right,
@@ -137,6 +141,14 @@ private static AttributeItem[] GetAttributes() =>
DefaultValue = " — "
},
new()
+ {
+ Name = "BodyScroll",
+ Description = "Where the enable body scrolling when drawer is shown",
+ Type = "bool",
+ ValueList = "true|false",
+ DefaultValue = "false"
+ },
+ new()
{
Name = "ChildContent",
Description = "Subassembly",
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 74bc53e1884..2f985a9ef14 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -894,6 +894,8 @@
"DrawerServiceIntro": "Open the drawer pop-up window by calling the DrawerService service",
"IsKeyboardTitle": "ESC",
"IsKeyboardIntro": "By default, the component uses the ESC key to close the drawer popup. You can enable this function by IsKeyboard=\"true\"",
+ "BodyScrollTitle": "Body Scroll",
+ "BodyScrollIntro": "By setting BodyScroll, you can control whether scrolling is allowed when the drawer pop-up window is displayed. Body is false by default, scrolling is not allowed",
"Open": "click me to open",
"Content": "The layout, components, etc. in the drawer are fully customizable",
"Close": "close the drawer",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index 2b4d3f0598e..0f3fca089e3 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -894,6 +894,8 @@
"DrawerServiceIntro": "通过调用 DrawerService 服务打开抽屉弹窗",
"IsKeyboardTitle": "ESC 按键支持",
"IsKeyboardIntro": "组件默认使用 ESC 按键关闭抽屉弹窗,可通过 IsKeyboard=\"true\" 开启此功能",
+ "BodyScrollTitle": "页面滚动",
+ "BodyScrollIntro": "通过设置 BodyScroll 控制抽屉弹窗显示时是否允许滚动 Body 默认 false 不允许滚动",
"Open": "点我打开",
"Content": "抽屉内布局、组件等完全可以自定义",
"Close": "关闭抽屉",
diff --git a/src/BootstrapBlazor/Components/Drawer/Drawer.razor b/src/BootstrapBlazor/Components/Drawer/Drawer.razor
index addc7b8a074..12948be0e13 100644
--- a/src/BootstrapBlazor/Components/Drawer/Drawer.razor
+++ b/src/BootstrapBlazor/Components/Drawer/Drawer.razor
@@ -2,7 +2,8 @@
@inherits BootstrapModuleComponentBase
@attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]
-
+
@if (ShowBackdrop)
{
diff --git a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs
index a4e32e5ad83..4ebf8aca239 100644
--- a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs
+++ b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs
@@ -125,8 +125,16 @@ public partial class Drawer
[Parameter]
public bool IsKeyboard { get; set; }
+ ///
+ /// 获得/设置 抽屉显示时是否允许滚动 body 默认为 false 不滚动
+ ///
+ [Parameter]
+ public bool BodyScroll { get; set; }
+
private string? KeyboardString => IsKeyboard ? "true" : null;
+ private string? BodyScrollString => BodyScroll ? "true" : null;
+
///
///
///
diff --git a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.js b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.js
index 9b021754c74..14dea40da52 100644
--- a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.js
+++ b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.js
@@ -115,13 +115,17 @@ export function execute(id, open) {
}
else {
el.classList.remove('show')
- body.classList.remove('overflow-hidden')
+ body.classList.remove('drawer-overflow-hidden')
}
}
if (open) {
el.classList.add('show')
- body.classList.add('overflow-hidden')
+
+ const scroll = el.getAttribute('data-bb-scroll') === "true";
+ if (scroll === false) {
+ body.classList.add('drawer-overflow-hidden');
+ }
requestAnimationFrame(show)
}
else if (el.classList.contains('show')) {
diff --git a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.scss b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.scss
index 697e94e9bd1..d5357d23cb3 100644
--- a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.scss
+++ b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.scss
@@ -184,3 +184,7 @@
}
}
}
+
+.drawer-overflow-hidden {
+ overflow: hidden;
+}
diff --git a/src/BootstrapBlazor/Components/Drawer/DrawerContainer.cs b/src/BootstrapBlazor/Components/Drawer/DrawerContainer.cs
index 0a50a68085e..dd515189dd7 100644
--- a/src/BootstrapBlazor/Components/Drawer/DrawerContainer.cs
+++ b/src/BootstrapBlazor/Components/Drawer/DrawerContainer.cs
@@ -66,6 +66,7 @@ private Dictionary GetParameters(DrawerOption option)
{
[nameof(Drawer.IsOpen)] = true,
[nameof(Drawer.IsKeyboard)] = option.IsKeyboard,
+ [nameof(Drawer.BodyScroll)] = option.BodyScroll,
[nameof(Drawer.IsBackdrop)] = option.IsBackdrop,
[nameof(Drawer.ShowBackdrop)] = option.ShowBackdrop,
[nameof(Drawer.Placement)] = option.Placement,
diff --git a/src/BootstrapBlazor/Components/Drawer/DrawerOption.cs b/src/BootstrapBlazor/Components/Drawer/DrawerOption.cs
index 0e489ce343d..85616fbe148 100644
--- a/src/BootstrapBlazor/Components/Drawer/DrawerOption.cs
+++ b/src/BootstrapBlazor/Components/Drawer/DrawerOption.cs
@@ -40,6 +40,11 @@ public class DrawerOption
///
public bool ShowBackdrop { get; set; } = true;
+ ///
+ /// 获得/设置 抽屉显示时是否允许滚动 body 默认为 false 不滚动
+ ///
+ public bool BodyScroll { get; set; }
+
///
/// 获得/设置 组件出现位置 默认显示在 Left 位置
///
diff --git a/test/UnitTest/Components/DrawerTest.cs b/test/UnitTest/Components/DrawerTest.cs
index 05293683e62..36dc900cc0c 100644
--- a/test/UnitTest/Components/DrawerTest.cs
+++ b/test/UnitTest/Components/DrawerTest.cs
@@ -182,6 +182,21 @@ public void IsKeyboard_Ok()
cut.DoesNotContain("data-bb-keyboard=\"true\"");
}
+ [Fact]
+ public void BodyScroll_Ok()
+ {
+ var cut = Context.RenderComponent(builder =>
+ {
+ builder.Add(a => a.BodyScroll, true);
+ builder.Add(a => a.ChildContent, s =>
+ {
+ s.OpenComponent