如何在 div 上显示滚动条？

Question

我正在尝试对 div 后面的内容应用模糊效果，但我无法让滚动条显示在 div 上方。

删除 overflow:auto 可以解决问题，但模糊效果将不再有效？

HTML

<div class="phone">
<div class="header">Kittens</div>
<div class="overlay"><div class="clone"></div></div>
<div class="content">
    <p><img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg" style="float:left;margin-right:1em;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at orci vestibulum, congue urna nec, fringilla dolor. Donec pellentesque odio non dui vehicula, eu gravida odio rhoncus. Sed eleifend eu nisi ullamcorper ultricies. Ut ante velit, facilisis ornare mauris vel, accumsan dapibus ipsum. Maecenas ac lobortis dolor, vitae facilisis tortor. Nam mollis, turpis ac mollis faucibus, dolor erat rutrum ipsum, ac eleifend est ipsum eget nibh. Aliquam venenatis a odio id hendrerit. Integer viverra, metus vel semper commodo, neque metus posuere turpis, non viverra sem sapien eget turpis. Cras sed rutrum ante. Praesent et augue eget ligula gravida ultrices.</p>

    <p>Mauris nec quam et orci faucibus laoreet a faucibus magna. Donec hendrerit aliquet libero, sed tincidunt arcu vehicula quis. Nam faucibus mauris non pretium fringilla. Aliquam convallis, urna eu malesuada imperdiet, odio diam varius diam, et iaculis eros odio sit amet quam. Nam at laoreet diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur nec ipsum nisi. Ut id lacus dolor. Maecenas nec sapien dignissim, condimentum eros sit amet, vehicula nulla. Ut dolor sem, dictum vel venenatis et, vestibulum et velit. Etiam a metus lacus. Etiam volutpat nibh ac risus gravida, in vestibulum augue vehicula. Aliquam erat volutpat. Donec sit amet sagittis ligula, non feugiat lacus. Pellentesque eget gravida neque.</p>

    <p>Nunc egestas ullamcorper porttitor. Vestibulum tempor nisl id erat ultrices interdum. Quisque gravida mauris eget iaculis venenatis. Pellentesque aliquam mi suscipit leo adipiscing faucibus. Vivamus ultricies turpis adipiscing erat gravida, a pretium massa pharetra. Integer at augue vulputate, scelerisque nisl sed, hendrerit nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sapien lacus, placerat id lectus nec, mattis facilisis quam. Integer ullamcorper cursus neque ut vehicula. Donec rhoncus, purus nec gravida hendrerit, diam mauris porttitor ligula, posuere placerat ante ligula quis libero. Proin suscipit nisl eget elementum iaculis.</p>

    <p>Nam eu est et arcu consectetur tincidunt. Donec risus neque, tempor dignissim faucibus rutrum, lobortis quis mi. Praesent dapibus rhoncus lacus ut auctor. In consectetur magna vitae nisi aliquet, suscipit convallis libero dapibus. Donec suscipit elementum tincidunt. Etiam accumsan eu dui quis vulputate. Morbi nibh tortor, sagittis ut nisl vitae, venenatis vulputate dolor. Mauris a porta neque, in sagittis nisl. Integer condimentum libero nec diam porttitor, at tempor tellus pretium. Suspendisse tellus lorem, condimentum vel ante quis, bibendum fringilla eros. Curabitur hendrerit tortor convallis, ullamcorper tellus vitae, ultricies enim.</p>

    <p>Duis scelerisque vitae arcu nec consectetur. Duis a mauris massa. Praesent tempus pellentesque massa in consectetur. Fusce non risus eu felis accumsan pretium in eu risus. Sed venenatis sodales massa ut eleifend. Pellentesque sagittis diam arcu, quis venenatis mi molestie in. Vivamus eget velit id libero lobortis pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris lobortis, leo eu elementum facilisis, mauris magna varius libero, ac hendrerit mi nibh id nisl. Phasellus malesuada odio sem, et semper nisl pellentesque vitae. Cras tincidunt, mi a fringilla aliquet, augue tellus vehicula urna, vulputate egestas neque nisl vel justo. Donec feugiat felis ut purus condimentum hendrerit id ac dolor. Maecenas mattis sagittis erat. Praesent interdum pulvinar turpis, ac viverra enim venenatis ut. Suspendisse fermentum urna eu dolor dignissim, at scelerisque arcu viverra</p>
</div>

CSS :

body {
  font-family: sans-serif;
}
.phone {
  width: 18em;
  position: absolute;
  top: 1em;
  bottom: 1em;
  left: 1em;
  border: 1px solid #666;
  border-width: 4em .75em;
  border-radius: 1.5em;
}
.header {
  padding: .5em;
  margin: 0;
  position: fixed;
  font-size: 1.5em;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, .15);
  background: rgba(255, 255, 255, .75);
  z-index: 3;
}
.overlay {
  height: 3.25em;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  overflow: auto;
  z-index: 2;
}
.clone {
  height: 3.25em;
  padding: 3em 1em 1em;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  background: #fff;
}
.content {
  padding: 3em 1em 1em;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  z-index: 1;
}

如有任何提示，我们将不胜感激

JS FIDDLE

Answer 1

您可以通过在 .header 和 .overlay 中设置 right: 16px 而不是 right: 0 来做到这一点。

http://jsfiddle.net/mmnkae8d/1/

如何在 div 上显示滚动条？

How to show scrollbar over div?

css

blur