那些遇到过的问题

如何在滚动时添加顶部和底部阴影,但仅在需要时添加？

Ric*_*ler 20 css

如何在容器溢出时添加阴影但仅在需要时添加阴影？

我的意思是:

  • 如果有内容可以在顶部或底部滚动,则显示阴影以告知用户有更多内容要scoll
  • 如果没有要滚动的内容,则不会出现阴影

并进一步澄清

  • 如果容器的内容溢出(即滚动)并且用户位于内容的最顶部,那么页面底部应该有阴影而不是顶部.
  • 同样如果用户位于页面底部,则期望顶部应该有阴影
  • 如果内容不溢出容器,则没有影子应该显示,以保持干净的东西.

我有工作的JavaScript解决方案,但出于性能原因,我想要一些纯粹的CSS.

有任何想法吗？

Ric*_*ler 19

我为在这里回答我自己的问题而道歉,但经过一些谷歌搜索,我找到了一个很好的CSS解决方案,适用于macOS上的chrome.

@Hash提供了一个来自lea verou博客的解决方案.她的解决方案用来background-attachment: local实现这个效果,但是目前在macOS上的chrome 59中打破了这个问题？(它至少在2012年开始工作但至少在2017年没有)但是,她的解决方案很棒,你应该在这里阅读更多相关信息.

在她的文章中(从2012年开始),她提到了一种使用伪元素的更老,更兼容的解决方案.这篇博文由Roman Komarov撰写,以下是他的文章中的一些直接引用.

这是一个古老的想法,但用纯CSS重新创建.

最初,我有一个额外的包装器和两个额外的伪元素.后来我决定重写代码并只使用一个元素(通过使用径向渐变).

虽然这种方法很简单,但有一些限制:

  • 背景必须坚实
    • 但是,如果你尝试背景附件:修复...)
  • 有一些定位问题

但在大多数情况下,这种方法相当防弹.

如果用简单的图像替换CSS渐变,这种方法可以在IE中使用.(它可能需要一些小的修复;我没有检查.)

这是从他的博客直接复制的一些代码:

html {
  background: #FFF;
}

.scrollbox {
  position: relative;
  z-index: 1;
  overflow: auto;
  width: 200px;
  max-height: 200px;
  margin: 50px auto;
  background: #FFF no-repeat;
  background-image: -webkit-radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), -webkit-radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  background-image: -moz-radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), -moz-radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  background-image: radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  background-position: 0 0, 0 100%;
  background-size: 100% 14px;
}

.scrollbox:before,
.scrollbox:after {
  content: "";
  position: relative;
  z-index: -1;
  display: block;
  height: 30px;
  margin: 0 0 -30px;
  background: -webkit-linear-gradient(top, #FFF, #FFF 30%, rgba(255, 255, 255, 0));
  background: -moz-linear-gradient(top, #FFF, #FFF 30%, rgba(255, 255, 255, 0));
  background: linear-gradient(to bottom, #FFF, #FFF 30%, rgba(255, 255, 255, 0));
}

.scrollbox:after {
  margin: -30px 0 0;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), #FFF 70%, #FFF);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), #FFF 70%, #FFF);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFF 70%, #FFF);
}
Run Code Online (Sandbox Code Playgroud) 
<div class="scrollbox">
    <ul>
        <li>Not enough content to scroll</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>


<div class="scrollbox">
    <ul>
        <li>Ah! Scroll below!</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>The end!</li>
        <li>No shadow there.</li>
    </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

Has*_*ash 12

我想你在找这样的东西;

参考:LINK

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, 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;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="scrollbox">
  <ul>
    <li>I Show Below Shadow. Go Down Now</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>The end!</li>
    <li>No shadow here. See Above. Go Up</li>
  </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

  • 如何在水平方向上做到这一点？ (5认同)
  • 但是阴影应保留在内容的顶部，否则如果内容是彩色的，效果将不起作用。 (2认同)
  • @Reigel我在这里水平滚动https://codepen.io/astro87/pen/LYRQNbd?editors=1100 (2认同)

Ros*_*nes 6

这是我整理的一个纯 CSS 解决方案，它将阴影放在内容上方而不是内容后面。

/* Stuff that doesn't matter */

html {
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
  font: 1rem/1.5 arial, sans-serif;
}

.c-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
}

.c-header {
  width: 100%;
  padding: 1rem 0;
  background: white;
}

.c-header_heading {
  margin: 0;
  font-size: 2rem;
  font-weight: bold;
}

/* Stuff that matters */

.c-scrollbox {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: scroll;
}

.c-scrollbox::before {
  content: '';
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  display: block;
  height: 1px;
  background: rgba(0,0,0,.32);
}

.c-scrollbox::after {
  content: '';
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  height: 1rem;
  background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
Run Code Online (Sandbox Code Playgroud) 
<div class="c-container">
  <header class="c-header">
    <h1 class="c-header_heading">Shadow on Scroll</h1>
  </header>
  <div class="c-scrollbox">
    <p>Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
    <p>Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <p>Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

  • 我看到顶部只有一条小像素线，这有效吗？ (3认同)

归档时间：

查看次数：

9105 次

最近记录：

6 年，1 月 前
相关归档
打印html页面时的保证金 128
仅使用CSS在HTML元素之间添加空格 90
IE 8是否对每页样式表的数量有限制？ 40
Webkit背面可见性无法正常工作 37
如何删除列表项之间的空格 34
如何消除CSS中内联元素之间的间距？ 32
HTML5视频背景颜色与网站的背景颜色不匹配 - 有时在某些浏览器中 22
Twitter Bootstrap Accordion和按钮下拉溢出问题 20
CSS水平布局键/值图例. 18
如何更改Microsoft Edge滚动条的颜色？ 18
难疑归档
避免!= null语句 3904
为什么Android模拟器这么慢？我们如何加快Android模拟器的速度？ 3356
如何测试私有函数或具有私有方法,字段或内部类的类？ 2593
如何在Node.js中退出 1762
重命名pandas中的列 1601
如何让ASP.NET Web API使用Chrome返回JSON而不是XML？ 1220
检查值是否是JavaScript中的对象 1194
更改列:null为非null 1177
如何使用SSH在远程计算机上运行shell脚本？ 1164
如何在PHP中获取客户端IP地址 1123