html - グラデーションオーバーレイがスクロールしないようにする

Question

スクロール div の下部に小さなグラデーションを配置しようとしています。この SO スレッドに対する受け入れられた回答に基づいてソリューションを作成しました。グラデーションは問題なく表示されますが、div のコンテンツをスクロールすると、グラデーションの下部が移動します。コンテンツがグラデーションとは無関係にスクロールするように、そのままにしておく必要があります。position: fixed、position: relative、およびのいくつかの組み合わせを試しましたがposition: relatve、役に立ちませんでした。私は何を逃したのですか？

関連する 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;
}

結果：

score 4 · Accepted Answer

あなたの要素は positionabsoluteであるため、その位置は親要素に対して絶対的であるため、スクロールするとコンテンツとともにスクロールします。あなたが望むのは、ulスクロールすることです。私はあなたのものをすぐに書き直しましたが、以下に単純化されクリーンアップされたバージョンがあります:

.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;
}

<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>

基本的に重要なことが 2 つあります。外側のボックスはスクロールできませんが、内側のボックスはスクロールできます。すべての固定要素は、内側のボックス (この場合はあなたのもの) の外側にある必要がありますul。第二に、マウスイベントを吸収してスクロールを妨げるため、高くする:beforeことはできません。100%IE 以外のすべてのブラウザーでは、を使用してこれを解決できますがpointer-events: none、それ以外の最も安全な方法は、グラデーションを固定の高さにし、:before要素を必要なグラデーションの高さにすることです20px。一番下のマウスイベント。

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;
}

<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>

score 0 · Accepted Answer

0

交換

.resultListContainer::before

と

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

于 2016-03-04T17:12:36.847 に答える

html - グラデーションオーバーレイがスクロールしないようにする

3 に答える 3

Related

Reference