スクロールオーバフロー：ブラウザのスクロールバーで固定divの隠しコンテンツ

-1

ブラウザのスクロールバーで固定divの内容をスクロールする必要があります。スクロールオーバフロー：ブラウザのスクロールバーで固定divの隠しコンテンツ

純粋なCSSでできますか？ JQueryを使ってソリューションにアプローチする方法はありますか？

私はスクロールバーをdiv内に入れたくありません。

<div class="fixed-layer"> 
    <div class="content-layer"> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu 
    feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
    <br /> 
    <strong>Scroll past this point with the browser scrollbar.</strong> 
    <br /> 
    blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

    </div> 
</div> 

.fixed-layer { 
    position: fixed; 
    top: 20px; 
    left: 20px; 
    width: 400px; 
    height: 400px; 
    overflow: hidden 
} 

.content-layer { 


}

これは私が望む結果ではありません！

出典

2017-02-06 bortran

は、[このスレッド]（http://stackoverflow.com/questions/3747581/jquery-vertical-scroll-with-mousewheel）に – gaetanoM

おかげで、スクロール動作しますが、それは実際のスクロールバーを欠いを見てください（ユーザがスクロールするものがあることに気付くため）。まだ最高の解決策です。 – bortran

それを確認してください

.fixed-layer { 
 
    position: fixed; 
 
    top: 20px; 
 
    left: 20px; 
 
    width: 400px; 
 
    height: 400px; 
 
    overflow: Scroll; 
 
} 
 

 
.content-layer { 
 

 

 
}

<div class="fixed-layer"> 
 
    <div class="content-layer"> 
 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
 
    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu 
 
    feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
 
    <br /> 
 
    <strong>Scroll past this point with the browser scrollbar.</strong> 
 
    <br /> 
 
    blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
 

 
    </div> 
 
</div>

出典

2017-02-06 11:46:40

広告は、div内のスクロールバーです。これは必要ありません。 – bortran

、このいずれかを試してみてください。

<body> 
    <div class="borderwrap top">&nbsp;</div> 
    <div class="fixed-layer"> 
    <div class="content-layer"> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu 
    feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
    <br /> 
    <strong>Scroll past this point with the browser scrollbar.</strong> 
    <br /> 
    blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    </div> 
    </div> 
    <div class="borderwrap bottom">&nbsp;</div> 
    </body> 

    .borderwrap { 
    width: 387px;  
    } 
    .borderwrap.top { 
    border-bottom: 1px solid; 
    } 
    .borderwrap.bottom { 
    border-top: 1px solid; 
    } 
    .fixed-layer { 
    height: 300px; 
    overflow-y: scroll; 
    padding: 0 5px 5px 0; 
    text-align: justify; 
    width: 400px; 
    } 
    .content-layer { 
    border-left: 1px solid; 
    border-right: 1px solid; 
    padding: 0 5px; 
    }

出典

2017-02-06 12:22:59

スクロールバーはまだページ内にあります。私はブラウザのスクロールバーを使用したい、私の質問をお読みください。 – bortran

スクロールオーバフロー：ブラウザのスクロールバーで固定divの隠しコンテンツ

答えて

関連する問題