链接:https://jsfiddle.net/casas111/d32m7603/2/
我需要溢出可见，但同时能够从 div 内部滚动它。
jsfiddle代码:
html:
<div class="screen">
<p class="content">Pellentesque habitant morbi
tristique senectus et netus
et malesuada fames ac turpis
egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget,
tempor sit amet, ante. Donec eu
libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris
placerat eleifend leo. Aenean ultricies
mi vitae est. Mauris placerat eleifend leo
Pellentesque habitant morbi
tristique senectus et netus
et malesuada fames ac turpis
egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget,
tempor sit amet, ante. Donec eu
libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris
placerat eleifend leo. Aenean ultricies
mi vitae est. Mauris placerat eleifend leo
Pellentesque habitant morbi
tristique senectus et netus
et malesuada fames ac turpis
egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget,
tempor sit amet, ante. Donec eu
libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris
placerat eleifend leo. Aenean ultricies
mi vitae est. Mauris placerat eleifend leo
</p>
</div>
CSS
.screen {
border-style: solid;
width: 200px;
height: 300px;
margin-left: 30%;
margin-top: 20%;
overflow: auto;
}
我看过这个:How to combine overflow:visible and overflow:scroll in CSS?
但没有明确的答案。 text-indent 适用于水平情况。这是一个简单的垂直案例。
编辑:
这段代码解决了隐藏滚动条的问题。我仍然无法在屏幕外显示溢出的内容。有人吗？
.screen {
margin-left: 30%;
margin-top: 20%;
width: 190px;
overflow: hidden;
height: 100%;
border: 2px solid #000;
}
.content {
width: 200px;
height: 300px;
padding: 5px 10px 5px 5px;
overflow: auto;
}
.screen::-webkit-scrollbar {
display: none;
}
最佳答案
对于所有寻找这个的人。我写了一个简单的 JQuery 代码来解决这个问题! 享受
<html>
<head>
<script src="js/jquery-2.1.4.min.js"></script>
<style>
.screen,
.content{
top:200px;
left:200px;
width: 190px;
height: 300px;
position: absolute;
}
.screen {
border: 2px solid #000;
z-index: 10;
}
</style>
<script type="text/javascript">
$(function(){
$('.screen').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0) {
console.log($( ".content" ).position().top);
$( ".content" ).css( "top", $( ".content" ).position().top+=5 );
}
else{
$( ".content" ).css( "top", $( ".content" ).position().top-=5 );
}
});
});
</script>
</head>
<body>
<div class="screen">
</div>
<div class="content">Pellentesque habitant morbi
tristique senectus et netus
et malesuada fames ac turpis
egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget,
tempor sit amet, ante. Donec eu
libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris
placerat eleifend leo. Aenean ultricies
mi vitae est. Mauris placerat eleifend leo
Pellentesque habitant morbi
tristique senectus et netus
et malesuada fames ac turpis
egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget,
tempor sit amet, ante. Donec eu
libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris
placerat eleifend leo. Aenean ultricies
mi vitae est. Mauris placerat eleifend leo
Pellentesque habitant morbi
tristique senectus et netus
et malesuada fames ac turpis
egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget,
tempor sit amet, ante. Donec eu
libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris
placerat eleifend leo. Aenean ultricies
mi vitae est. Mauris placerat eleifend leo
</div>
</body>
</html>
你可以看到它在这里工作:https://jsfiddle.net/casas111/d32m7603/5/
关于html - 滚动可见溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31786518/