Question

我对网页设计还很陌生，现在我已经在几个小时内一直在努力解决这个问题。我想要一个滚动文本框，其中文本上有一个渐变，当您向上和向下滚动时，渐变保持固定。我现在的代码生成一个带有渐变的滚动div，但该渐变是在div中包含的文本的整个高度上生成的。我希望渐变的范围限于div本身，如果这是有道理的。

似乎几乎就是给出梯度div固定位置的解决方案。但是，当您的鼠标位于此固定div上时，您无法滚动其下方的（父）div。

如果在其他地方已经回答了我的道歉。我在周围寻找但可能错过或误读了一些东西。

Anyhoo在这里展示了目前正在发生的事情：http://jsfiddle.net/sP2e5/

这是实际的html：

<div class="transcript" id="prisonerResponse">
        <p>i'm actually including an obnoxious amount of text 
           so you can see the scrolling effect: so much textso much 
            textso much 
            textso much textso much textso much 
            textso much textso much textso much textso 
            much textso much textso much textso much textso 
            much textso much textso much textso much 
            textso much textso much textso much 
            textso much textso much textso much t
            extso much textso much textso much t
            extso much textso much textso much 
            textso much textso much textso much 
            textso much textso much textso much text</p>
            <div class="transcriptGradient"> </div>

</div>

这是css：

 .transcript{
    overflow:scroll; 
    width:350px; 
    height:100px;
    display:inline-block;
    margin-left:20px;
    position:relative;
    }

.transcriptGradient{
    width:100%; 
    height:100%;
    position:absolute;
    top:0;
    background: -webkit-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100% );
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255,255,255,0) 100%); 
}

Answer 1

:before中使用div.transcript选择器，您无需额外div即可获得此结果。您只需将position: fixed;应用于.transcript:before。

这些方法的缺点（将渐变置于可滚动内容之上）是在Firefox中，如果光标位于渐变上，则无法滚动内容。所以请注意梯度高度。

<强> HTML

<div class="transcript" id="prisonerResponse">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. [...] </p>
</div>

<强> CSS

.transcript {
    overflow: scroll;
    width: 350px;
    height: 200px;
    display: inline-block;
    margin: 10px;
    position: relative;
}
.transcript:before {
    content:"";
    width: 350px;
    height: 80px;
    position: fixed;
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

希望有所帮助：）

Answer 2

如果您不太在意代码的样子......这是解决问题的“正常”方式，请更改.transcriptGradient展示位置：

<强> Jsfiddle example

CSS - 应用一个在div滚动时保持固定的渐变

2 个答案: