滚动可见溢出

Question

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

Answer 1

你的代码非常好，只需要在下面给出一点修正

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

Answer 2

根据你的评论，你想隐藏 div 的滚动条。我应用了简单的 css 技巧。

我通过缩小 dive 的父容器宽度并为 div.

应用 overflow:hidden 隐藏了滚动条区域

已与 google-chrome, firefox and 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>

Answer 3

对于所有寻找这个的人。我写了一个简单的 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/

滚动可见溢出

Scroll with overflow visible

html

css

overflow

scrollbar