如何在Angular 9/TypeScript中添加垂直滚动条
在Angular 9/TypeScript中添加垂直滚动条可以通过使用CSS样式和HTML元素来实现。以下是一种常见的方法：
- 首先，在你的组件的HTML模板中，创建一个具有固定高度的容器元素，用于包裹需要滚动的内容。例如：
<div class="scroll-container">
<!-- 内容 -->
</div>- 在组件的CSS样式文件中，为容器元素添加样式，使其具有固定高度和溢出自动滚动的属性。例如：
.scroll-container {
height: 300px; /* 设置容器的高度 */
overflow-y: auto; /* 允许垂直滚动 */
}- 在容器元素中添加需要滚动的内容。可以是文本、图像、表格等任何HTML元素。
<div class="scroll-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
<!-- 其他内容 -->
</div>这样，当内容超过容器的高度时，会自动出现垂直滚动条。
对于Angular 9/TypeScript开发，你可以使用ngx-perfect-scrollbar库来实现更高级的滚动条效果。该库提供了丰富的自定义选项和功能，可以轻松地在Angular项目中添加滚动条。
要使用ngx-perfect-scrollbar库，首先安装它：
npm install ngx-perfect-scrollbar然后，在你的组件中导入和使用它：
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
// 在组件类中定义配置选项
public scrollbarConfig: PerfectScrollbarConfigInterface = {
// 配置选项
};
// 在模板中使用
<perfect-scrollbar [config]="scrollbarConfig">
<!-- 内容 -->
</perfect-scrollbar>你可以根据需要调整配置选项，例如滚动条的颜色、大小、滚动速度等。
这是一个基本的示例，你可以根据具体需求进行进一步的定制和扩展。请注意，ngx-perfect-scrollbar库是一个第三方库，与腾讯云无关。
相关·内容
我有一个页面，在加载了所有数据之后，主体或换行div的长度肯定比屏幕长，但没有显示垂直滚动条。 在所有XHR完成后，在Angular 9中添加垂直滚动条最简单的方法是什么？让页面重新计算长度。
浏览 19提问于2020-12-22得票数 0
1回答
我有一个带有粘性标题和页面垂直滚动的垫表。它工作得很好，直到我动态添加更多的列，并出现水平滚动条。 粘性标题停止工作。 有没有办法让它工作呢？请参考示例： https://stackblitz.com/edit/angular-hdg9xh
浏览 23提问于2020-06-10得票数 1
回答已采纳
大家好，
我有一个问题，看起来是由于IE的盒子模型错误造成的，但我不太确定如何在dojo中解决它。我有一个ContentPane，我把它放到一个典型的AccordionContainer中，静态内容在ContentPane中是苍白的。在所有其他浏览器上，如果ContentPane中的内容溢出底部，则会出现一个垂直滚动条。但是，在IE中，当垂直滚动条出现时，水平滚动条也会出现。很明显，IE中<
浏览 1提问于2009-09-18得票数 1
回答已采纳
1回答
我想要实现一个浮动的水平滚动条，当表在视图中时，它会浮动水平滚动条。我在使用Jquery时遇到了这些解决方案，但很难在角6(或5、4、3等)中实现这些解决方案。有没有人有这个解决方案，或者可以帮助我如何在角度上实现？提前谢了。
浏览 0提问于2018-11-24得票数 2
1回答
然而，我发现这篇文章没有任何有价值的答案()，在basic中，如果内容比页面长，我希望能够有一个垂直滚动条。我认为添加“overflow:滚动”是明智的，但是页面似乎通过了内容容器的末尾。因此，解决方案是(理想的)，内容容器在检测到页面比容器长时自动添加滚动条垂直，或者我可以向容器中的div添加一个“overflow:滚动”？
有人能找到可行的解决办法吗？如本例所示，这将无法工作，因为我不想转到下一页垂直</
浏览 2提问于2015-02-27得票数 0
回答已采纳
2回答
在这里，使用ng-重复指令在表中显示名称，我计划添加ng样式的指令，以便根据表行数向表添加垂直滚动条。如何使下面的代码工作？例:只有当表行数超过4时，我们才需要垂直滚动条--我试过这样做<html>
浏览 4提问于2016-12-12得票数 3
回答已采纳
如何在Typescript (应用程序是Angular 9)中获得CKEDITOR 4插件的句柄？
我需要通过typescript (自动增长)设置配置，并尝试执行插入HTML功能。从‘CKEditor4 -angular/ckeditor’导入{CKEditor4}；
浏览 3提问于2020-05-31得票数 0
200x200)然后，我希望图像在父文件中垂直和水平地居中。当图像较高时(如。(100×300)与父文件相比，我希望它放在父文件的顶部，并具有垂直滚动条，以便能够看到整个图像。
我知道如何在Javascript中这样做，但我需要一个CSS解决方案。
浏览 5提问于2017-10-05得票数 1
回答已采纳
我正在Angular 2 (rc5)和TypeScript (1.8.10)上开发应用程序。Angular 2是在TypeScript上写的，但在node_modules中我看到了js和*.d.ts。在GitHub上寻找资源太难了。如何在WebStorm中为Angular 2添加源代码(在ts中)？
浏览 15提问于2016-08-20得票数 0
1回答
我正在寻找一种让我的ListView看起来像这样的方法：也就是说，除了自定义滚动条轨迹和thumb (可以由android:scrollbarTrackVertical和android:scrollbarThumbVertical属性指定)之外，我还需要在垂直滚动条旁边画一条垂直装饰线，它永远不会淡出。我尝试将这行添加到指定为android:scrollbarTrackVertical的9patch可绘制中，但似乎滚动条总是位于可绘制的中间
浏览 0提问于2013-02-25得票数 0
我已经将我的ag-grid版本从7.2.0升级到了14.2.0。当我将sizeColumnsToFit() api与onGridReady或onGridSizeChanged事件结合使用时，它可以工作，但它保留了不必要的水平滚动，这可能是由于网格宽度计算错误造成的。与以前的版本，这完全工作良好，没有任何水平滚动。这是我的gridOptions：
$scope.ag_grid_options =
浏览 15提问于2017-11-23得票数 20
回答已采纳
3回答
border:solid; overflow: auto;"></div>我试图在节点文本的可见部分和滚动条之间添加一个可视空间这样，切线的末端和垂直滚动条之间就会有一个间隙，而切线有‘.’。最后，树的底部和水平滚动条之间有一个间隙。
我在这里看过很多帖子，尝试过不同的组合，如</
浏览 9提问于2016-05-11得票数 5
回答已采纳
我使用的是NavigationView，在NavigationView中添加了许多项，并将PaneDisplayMode设置为LeftCompact。它将自动显示垂直滚动条。我想把它藏起来。我以NavigationView的风格在generic.xaml中查找，发现所有的项目都在NavigationViewList中。我还发现NavigationViewList是基于ListView的，所以我将ListView添加到app.xaml中，并设置Verti
浏览 7提问于2020-01-19得票数 0
回答已采纳
如何在我的globalErrorHandler for angular中获得错误的完整堆栈跟踪。因为在大多数情况下，它只返回未知错误，而不是真正的错误。我需要它没有任何api，如哨兵或滚动条。
浏览 1提问于2021-05-30得票数 0
1回答
jVectorMap中的滚动控制
、、、、
但是当用户放大页面时，我需要允许用户使用垂直和水平滚动条滚动地图。因此，我期待一个滚动条水平和垂直，其中使用该用户可以看到完整的地图，即使它是缩放。
但我不知道如何在jVector map中添加这样的滚动按钮控件。有人能帮我解
浏览 4提问于2018-01-02得票数 0
回答已采纳
1回答
我想在我的数据网格的头部添加一个图标，就像在Thunderbird中做的那样。无论水平滚动条的位置如何，垂直滚动条上方都有一个图标。此图标允许设置列。在Delphi中有许多不同的网格组件，允许自定义和添加图标到单元格/标题单元格。但我找不到任何在垂直滚动条上方有固定区域的组件，当单击它时，它会允许一些操作。
浏览 0提问于2012-07-27得票数 1
回答已采纳
当AutoCompleteText中的文本记录大于其高度时，自动出现垂直滚动条，但为什么当文本长度大于AutoCompleteText宽度滚动条时不出现？如何在AutoCompleteText中添加水平滚动条？
浏览 5提问于2017-01-18得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
