我希望在内容超出可用宽度时启用滚动阴影。我想通过纯CSS(无JS)实现这一目标。使用我在各种文章中找到的技巧,我可以通过多个CSS背景和
如果内容只是文本,则下面的代码可以正常工作。但是,在按钮的情况下,阴影背景会显示在按钮后面。如何将这些阴影显示在按钮上方? 期望的行为:
background-attachment
来实现我的目标。如果内容只是文本,则下面的代码可以正常工作。但是,在按钮的情况下,阴影背景会显示在按钮后面。如何将这些阴影显示在按钮上方? 期望的行为:
场景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: 160px;
margin: 0 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, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
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(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
background-repeat: no-repeat;
background-color: white;
background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
/* Opera doesn't support this in the shorthand */
background-attachment: local, local, scroll, scroll;
}
<div class="scrollbox">
<ul>
<li>Ah! Scroll below!</li>
<li><button>Button</button></li>
<li><button>Button</button></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li><button>Button</button></li>
<li><button>Button</button></li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>The end!</li>
<li>No shadow there.</li>
</ul>
</div>