滚动显示溢出答案

【问题标题】：Scroll with overflow visible滚动显示溢出
【发布时间】：2015-10-25 12:20:50
【问题描述】：

链接：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;
 }

【问题讨论】：

How to combine overflow:visible and overflow:scroll in CSS?的可能重复
@Alejandro 你想隐藏滚动条吗？
@eirenaios 是的，如果可能的话。虽然最初我只需要它那样工作。

标签： html css scrollbar overflow

【解决方案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>

【讨论】：

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

【解决方案2】：

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

【讨论】：

【解决方案3】：

根据您的评论，您想隐藏 div 的滚动条。我已经应用了简单的 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>

【讨论】：

@Alejandro 这就是你想要的吗？
关闭，但不在那里。我需要能够看到内容溢出。我会从你的代码中测试并回来。谢谢