Question

是的，所以我试图在桌子的一侧创建一个不适合我的resonsive布局的淡入淡出效果，以便用户可以识别出他能够滚动table（由于滚动条在移动设备上不可见）。

我已经在插图中使用了box-shadow来创建一个落在桌子上的花哨的阴影，但是当我滚动它时，它绝对定位（显然，因为我指定了）并且滚动。而不是留下来。

当我将位置指定为fixed时，:after将整个正文用作其父级，而不仅仅是其相对父级。

.table-holder {
    width: 400px;
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 20px;
    position: relative;
    height: auto;
}

.everything .table-holder:after {
    box-shadow: -20px 1px 20px 0 #f00 inset;
    content: "";
    display: block;
    height: 200%;
    left: -0;
    position: absolute; /* : fixed takes the whole page */
    top: -20px;
    width: 100%;
}

这可以在这里进行讨论：http://jsfiddle.net/8enne5qf/1/

是否可以将这个阴影固定在父div上？

Answer 1

由于table-holder溢出滚动属性换行table-holder在另一个div中，阴影滚动，并为:after设置position:absolute，您也可以使用它渐变而不是盒子阴影

演示 - http://jsfiddle.net/victor_007/gt7rceLs/1/

.everything .shadow:after{
    content:"";
    position:absolute;
    right:0;
    width: 25%;
    top:0;
    bottom:0;
    box-shadow: -20px 1px 20px 0 #f00 inset; /** or gradient **/
}

对水平滚动表的淡化效果

1 个答案: