TDesign的Drawer抽屉怎么设置固定在页面顶部？

Prog.彦森提问于 2026-02-19 08:20:32 阅读 42

组件

在用TDesign做页面时，Drawer抽屉总是跟着页面内容滚动，我设置了placement="top"但滚动页面时它会跑到中间位置，试过加固定定位样式也没用，该怎么让它始终保持在视口顶部呢？

Drawer抽屉 TDesign

我来解答赞 7 收藏

反馈

2 条解答

UX利娜 Lv1

TDesign 的 Drawer 默认是基于 body 定位的，你得给它加个属性 attach，值设为 "body"，然后在外面包一层固定定位的容器。改成这样：

<div style="position: fixed; top: 0; left: 0; width: 100%;">

  <t-drawer placement="top" attach="body"></t-drawer>

</div>

如果还是不行，检查一下你的样式冲突，尤其是 transform 或 overflow 相关的属性，可能会影响定位上下文。

2026-02-19 09:26

雅涵 Lv1

这个问题其实是 Drawer 的 placement 属性和样式定位之间的冲突导致的。按照 TDesign 官方文档的规范，placement="top" 只是决定了抽屉从哪个方向弹出，但并不会自动帮你处理固定定位的问题。

要让抽屉始终保持在视口顶部，你需要额外设置 CSS 样式来覆盖默认行为。具体来说，可以通过给 Drawer 的外层容器添加 position: fixed 和 top: 0 来实现。不过要注意，TDesign 的 Drawer 组件内部可能有自己的样式作用域，所以你可能需要通过 :deep 或者更高优先级的选择器来覆盖默认样式。

这里是一个示例代码：

<template>

  <t-drawer placement="top" :visible="true" class="custom-drawer">

    抽屉内容

  </t-drawer>

</template>



<style scoped>

.custom-drawer :deep(.t-drawer__content) {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  margin: 0 auto;

  width: 100%; /* 根据实际需求调整宽度 */

}

</style>

另外，如果你使用的是自定义主题或者全局样式，建议检查一下是否有其他样式影响了 Drawer 的布局。如果还是有问题，可以尝试在官方文档中搜索 "Drawer 自定义样式"，那里有更详细的说明。

说实话，这种问题挺常见的，组件库的设计往往不会覆盖所有的场景，自己动手改样式也是常事。记得测试一下不同屏幕尺寸下的表现，避免出现奇怪的兼容性问题。

2026-02-19 08:22