防止滚动的渐变叠加

时间:2016-03-04 17:07:37

标签: html css css3 css-position css-gradients

我试图在滚动div的底部放一个小渐变。我的解决方案基于this SO thread的已接受答案。渐变显示正常,但是当我滚动div中的内容时,渐变的底部会移动。我需要它保持原位,以便内容独立于渐变滚动。我尝试了position: fixedposition: relativeposition: relatve的几种组合无济于事。我错过了什么?

相关标记:

<div class="resultListContainer">
    <ul class="result">
        <li><span class="resultPermitNumber resultElement">B123456789</span></li>
        <li><span class="resultPermitType resultElement">FINAL</span></li>
        <li><span class="resultDisplayAddress resultElement">41975 LOUDOUN CENTER PL SE, LEESBURG, VA 20175</span></li>
    </ul>
    <!-- Lots more of the ul. -->
</div>

相关CSS:

.resultListContainer {
    border: 1px solid #000;
    height: 400px;
    width: 40em;
    overflow-y: scroll;
    font-size: 1em;
    position: relative;
}

.resultListContainer::before {
    background-image: linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
    background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
    background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
    background-image: -o-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
    background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0 ) 95%, rgba( 255, 255, 255, 1 ) 100% );
    content: "\00a0";
    height: 100%;
    position: absolute;
    width: 100%;
}

.result {
    margin-bottom: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    list-style-type: none;
}

结果:

The gradient stop scrolls.

3 个答案:

答案 0 :(得分:2)

由于您的元素位于absolute,因此它的位置对于父元素是绝对的,因此当您滚动它时,使用滚动您的内容。你想要的是你的ul滚动。我很快就改写了你的,但是我已经得到了一个简化的清理版本:

&#13;
&#13;
.resultListContainer {
    border: 1px solid #000;
    height: 400px;
    width: 40em;
    font-size: 1em;
    position: relative;
}

.resultListContainer::before {
    background-image: linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
    background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
    background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
    background-image: -o-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
    background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0 ) 95%, rgba( 255, 255, 255, 1 ) 100% );
    content: "\00a0";
    height: 100%;
    position: absolute;
    width: 100%;
  z-index: 2;
  pointer-events: none;
}

.result {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  box-sizing: border-box;
  z-index: 1;
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    list-style-type: none;
    overflow-y: scroll;
}

.result li {
  height: 100px;
  background: red;
}
&#13;
<div class="resultListContainer">
    <ul class="result">
        <li><span class="resultPermitNumber resultElement">B123456789</span></li>
        <li><span class="resultPermitType resultElement">FINAL</span></li>
        <li><span class="resultDisplayAddress resultElement">41975 LOUDOUN CENTER PL SE, LEESBURG, VA 20175</span></li>
        <li><span class="resultPermitNumber resultElement">B123456789</span></li>
        <li><span class="resultPermitType resultElement">FINAL</span></li>
        <li><span class="resultDisplayAddress resultElement">41975 LOUDOUN CENTER PL SE, LEESBURG, VA 20175</span></li>
        <li><span class="resultPermitNumber resultElement">B123456789</span></li>
        <li><span class="resultPermitType resultElement">FINAL</span></li>
        <li><span class="resultDisplayAddress resultElement">41975 LOUDOUN CENTER PL SE, LEESBURG, VA 20175</span></li>
    </ul>
    <!-- Lots more of the ul. -->
</div>
&#13;
&#13;
&#13;

基本上有两件事是重要的:你的外盒不能可滚动,你的内盒可以。所有固定元素都需要在外面你的内部框(在这种情况下是你的ul)。其次,您的:before不能为100%高,因为它会吸收您的鼠标事件,从而阻止滚动。对于除IE之外的所有浏览器,您可以使用pointer-events: none解决此问题,但最安全的方法是使渐变为固定高度,将:before元素设置为所需渐变的高度,从而产生(在这种情况下)20px区域不会将您的鼠标事件放在底部。

&#13;
&#13;
html, body { height: 100%; } body { padding: 0; margin: 0; }
div {
  width: 400px;
  height: 400px;
  max-height: 100%;
  position: relative;
}

div:before, div ul {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

div:before {
  background: linear-gradient(0deg, rgba(255,255,255,1), rgba(255,255,255,0));
  background-size: 100% 100%;
  height: 20px;
  z-index: 2;
  /* IE does not support pointer events, so making this small in height is important
  as your scroll events will not be passed to the ul if it is covered by your :before */
  pointer-events: none;
  content: '';
  display: block;
}

div ul {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-y: scroll;
  z-index: 1;
}

div li {
  width: 100%;
  height: 100px;
  background: #ececec;
}

div li:nth-child(2n){
  background: #cecece;
}
&#13;
<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您需要将容器包装在另一个位于相对位置的div中。

此外,叠加层会阻止您的滚动条,因此我使用width: 100%而不是left:0; right: 16px; - 现在可以点击滚动。

试试我的小提琴: https://fiddle.jshell.net/8c6k4k6d/1/

答案 2 :(得分:0)

替换

.resultListContainer::before

.resultListContainer .result:last-of-type::before