滚动溢出可见

链接：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?

但没有明确的答案。文本缩进是针对水平的情况。这是一个简单的垂直情况。

编辑：

此代码解决了隐藏滚动。我仍然无法显示屏幕内容溢出。任何人？

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

来源

2015-08-03 Alejandro

的可能重复[如何结合溢出：可见和溢出：在CSS滚动]（http://stackoverflow.com/questions/24230472/how-to-combine-overflowvisiblevisible-and-overflowscroll-in-css） – klaar

@Alejandro你想隐藏滚动条吗？ – Suresh

@eirenaios如果可能的话。虽然最初我只是需要它这样工作。 – Alejandro

人们寻找这一点。我写了一个简单的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/

来源

2015-08-04 01:34:37 Alejandro

你的代码那么好，只需要为u要隐藏DIV的滚动条将在下文

<style> 
    .content { 
     width: 168px; 
     height: 300px; 
     padding: 5px 10px 5px 5px; 
    } 
    .content:hover{ overflow-x:scroll;} 
    </style> 


And full code are given below have a look 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style> 
.screen { 
    margin-left: 30%; 
    margin-top: 20%; 
    width: 190px; 
    overflow: hidden; 
    height: 100%; 
    border: 2px solid #000; 
} 
.content { 
    width: 168px; 
    height: 300px; 
    padding: 5px 10px 5px 5px; 
} 
.screen::-webkit-scrollbar { 
    display: none; 
} 
.content:hover{ overflow-x:scroll;} 
</style> 
</head> 

<body> 
<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> 
</body> 
</html>

来源

2015-08-03 11:58:21

没有解决我的问题。当我滚动时，我需要看到溢出。另外，当我停止悬停时，它会重新安排到初始状态。 – Alejandro

表示为每您的评论有点校正。我已经应用简单的CSS技巧。

我已通过采取该潜水的父容器的更小的宽度隐藏滚动条区域和用于该div施加overflow:hidden。

检查google-chrome,firefox和internet-explorer-11工作得很好。

仅供参考Hide scroll bar, but still being able to scroll

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

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

来源

2015-08-03 14:19:19 Suresh

@Ajjandro这是你想要的吗？ – Suresh

关闭，但不在那里。我需要能够看到内容溢出。我会测试你的代码并回来。谢谢 – Alejandro

有什么建议吗？ :) – Alejandro

滚动溢出可见

回答

相关问题