我正在处理一个表格,它有很多列和行,所以它有一个水平和垂直的滚动.

第一列是固定的,它有一个阴影.只有当用户水平滚动时,该阴影才可见.

我创建了一个SCSS类active-scroll-shadow,当用户水平滚动时,该类是活动的.

我想要实现与表格垂直滚动相同的行为.

有没有办法在表格垂直滚动事件而不是浏览器滚动上激活一个类?

Stackblitz

推荐答案

根据您对水平滚动所做的操作,您可以获得带有.scrollTop属性的垂直滚动.

  onScroll(event) {
    console.log(`scrollLeft: ${this.scrollElem.scrollLeft}`);
    this.ApplyShadow = this.scrollElem.scrollLeft > 5;

    console.log(`scrollTop: ${this.scrollElem.scrollTop}`);
    this.ApplyVerticalShadow = this.scrollElem.scrollTop > 5;
  }

您可能只需要为垂直阴影使用另一个变量(我称之为ApplyVerticalShadow),然后您就可以像处理水平阴影一样有条件地应用阴影.希望这能帮上忙.

Css相关问答推荐

日期面板未与Angular中的日期控件对齐

Primeng Angular更改p-dialog背景 colored颜色

Css扩展搜索栏,如何添加图标结束?

如何在CSS中平滑线性平移动画

为什么CSS flex似乎应用了两次内部元素的填充?

将特定样式应用于递归Angular 元素

如何为图像堆叠效果下方的图层实现与磨砂玻璃类似的视觉效果

当滚动量较小时,在滚动问题上动画粘性导航

如何在使用 bslib 5 的shiny 应用程序中使用样式参数排列 ui 元素

有没有办法让它比它更敏感?

如何制作一个居中的标题样式,其中换行符将最长的行排列在底部

仅对父容器应用模糊效果

ID 在整个页面中必须是唯一的吗?

CSS 表格 td 宽度 - 固定,不灵活

修复 Mobile Safari (iPhone) 上文本呈现不一致且某些字体比其他字体大的字体大小问题?

HTML表格:保持列的宽度相同

CSS 插入边框

使用 inline-block 换行?

背景图像可以大于 div 本身吗?

从 textarea 中删除所有样式(边框、发光)