当前位置: 首页 > 知识库问答 >
问题:

前端 - 页面底部固定的按钮栏,当页面出现滚动条的时候才显示上部阴影,应该如何实现?

梁鸣
2023-10-27

如图,我需要当页面所指模块内容溢出,出现滚动条的时候

底部的按钮栏的上面部分才显示阴影

image.png

如果模块内页面很短,就只固定按钮栏在下面,且不显示阴影

请问要如何实现这个效果呢?

共有2个答案

郤仰岳
2023-10-27

可以取上方内容的滚动高度和实际高度比较(el.scrollHeight > el.clientHeight)来为下方按钮区域添加动态class来决定是否在按钮区域上方存在阴影

皇甫乐
2023-10-27

用js判断内容高度是否大于容器高度,如果大于了,那就增加上阴影样式,否则移除样式

 类似资料:
  • 我修改了滚动条的颜色,但是修改后它就变成常驻的了,我希望它和之前一样,只在滚动的时候才显示出来。 下面是我的代码: 我该如何修改?

  • 本文向大家介绍js实现滚动条滚动到页面底部继续加载,包括了js实现滚动条滚动到页面底部继续加载的使用技巧和注意事项,需要的朋友参考一下 这个实例应该说可以很简单,直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理,遇到一些小知识点可以分析一下也算有所得。 原理很简单,就是为window添加一个scroll事件,浏览器每次触发scroll事件时判断是否滚动到了浏览器底部,如果

  • 这是我的代码,我想我的页脚是静态的在我的html页面底部,我如何修复它?

  • 我的问题是,一旦页脚进入视口,侧边栏就不应该被修复。 我发现了几十个关于固定边栏的问题,但是我在这里找到的答案并没有解决我的问题。 我在这里发现了类似的东西,但我的问题是,我不能应用这个解决方案,因为我的超文本标记语言结构不同。我也希望你的答案是纯js而不是jQuery

  • 问题内容: 考虑我有一个问题清单。当我单击第一个问题时,它应该自动带我到页面底部。 实际上,我确实知道可以使用jQuery完成此操作。 因此,您能为我提供一些文档或一些链接,以找到该问题的答案吗? 编辑:需要滚动到页面底部的特定HTML 元素 问题答案: 不需要jQuery。我从Google搜索获得的大多数热门结果都给了我这个答案: 在嵌套元素的地方,文档可能不会滚动。在这种情况下,您需要定位要滚

  • 我有一个问题清单。当我点击第一个问题时,它应该会自动把我带到页面底部。 事实上,我确实知道这可以使用jQuery来完成。 所以,你能给我一些文件或一些链接,我可以找到这个问题的答案吗? 编辑:需要滚动到页面底部的特定HTML元素