小编Cha*_*eti的帖子

纯CSS滚动阴影

我要求在内容超出可用宽度时启用滚动阴影。我正在尝试使用纯CSS（无JS）实现这一点。我碰到了很多文章，并且可以使用CSS多背景和背景附加实现。如果内容是文本类型，则在下面的jsfilldle代码中可以正常工作，在按钮情况下，背景位于按钮后面。因此，从视觉上讲这是行不通的。

预期的行为：

方案A：应仅在右侧启用阴影，因为滚动条位于最左侧

方案B：应将阴影的左侧和右侧同时启用，因为滚动条位于中间，从左侧移动了一部分

方案C：应仅在左侧启用阴影，因为滚动条位于最右侧。

例如：

/**
 * Scrolling shadows by @kizmarh and @leaverou
 * Only works in browsers supporting background-attachment: local; & CSS gradients
 * Degrades gracefully
 */

html {
  background: white;
  font: 120% sans-serif;
}
.scrollbox {
  overflow: auto;
  width: 200px;
  max-height: 200px;
  margin: 50px auto;
  background:
  /* Shadow covers */
  linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
  /* Shadows */
  radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, …

Run Code Online (Sandbox Code Playgroud)

html css css3

Cha*_*eti

2016 07-23

5
推荐指数

1
解决办法

3038
查看次数

标签统计

css ×1

css3 ×1

html ×1

纯CSS滚动阴影

标签 统计

小编Cha_eti的帖子

标签统计