【问题标题】:Making a div vertically scrollable using CSS使用 CSS 使 div 可垂直滚动
【发布时间】:2012-03-31 05:35:33
【问题描述】:

这个

<div id="" style="overflow:scroll; height:400px;">

给出div,用户可以水平和垂直滚动。如何更改它以使 div 可垂直滚动?

【问题讨论】:

  • CSS3 中有 overflow-xoverflow-y,可以满足您的需求。
  • 确保你的元素没有pointer-events: none;,因为它会禁用滚动

标签: html css


【解决方案1】:

除了使用错误的属性之外,您还可以解决它。滚动条可以使用任何属性overflowoverflow-xoverflow-y 触发,并且每个属性都可以设置为visiblehiddenscrollautoinherit 中的任何一个。您目前正在查看以下两个:

  • auto - 此值将查看框的宽度和高度。如果它们被定义,它不会让盒子超出这些边界。相反(如果内容超出了这些边界),它将为超出其长度的任一边界(或两者)创建滚动条。

  • scroll - 这个值强制滚动条,无论如何,即使内容没有超出设置的边界。如果内容不需要滚动,该栏将显示为“禁用”或非交互。

如果您总是希望垂直滚动条出现:

您应该使用overflow-y: scroll。这强制一个滚动条出现在垂直轴上,不管它是否需要。如果您实际上无法滚动上下文,它将显示为“已禁用”滚动条。

如果您只希望在可以滚动框的情况下出现滚动条:

只需使用overflow: auto。由于默认情况下您的内容在当前行无法容纳时会中断到下一行,因此不会创建水平滚动条(除非它位于禁用自动换行的元素上)。对于竖线,它将允许内容扩展到您指定的高度。如果超过该高度,它将显示一个垂直滚动条以查看其余内容,但如果它不超过该高度,则不会显示滚动条。

【讨论】:

  • 使用溢出:自动在页面底部创建了一个巨大的空白块。这是常见的情况吗?
【解决方案2】:

像这样试试。

<div style="overflow-y: scroll; height:400px;">

【讨论】:

  • 很好的解决方案,但无论高度如何,滚动始终可见
  • 如果将overflow-y 值设置为'auto',则在定义高度后滚动将可见。例如
【解决方案3】:

对于 100% 视口高度使用:

overflow: auto;
max-height: 100vh;

【讨论】:

  • 感谢最大高度。在我的用例中更经常需要它。
【解决方案4】:

在 div 上使用overflow-y: auto;

此外,您还应该设置宽度。

【讨论】:

  • 为什么要设置宽度?
  • @LeeGee 你需要 width 来计算 div 的内容是否超出了 div 的边界,因此是否启用滚动。
  • 默认宽度不是100%吗?
  • @LeeGee 不,默认是auto。通常,这意味着 100% 的父宽度,但并非总是如此。
【解决方案5】:

您可以改用此代码。

<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">


overflow-x:overflow-x 属性指定如何处理内容的左/右边缘 - 如果它溢出元素的内容区域。
overflow-y:overflow-y 属性指定如何处理内容的顶部/底部边缘 - 如果它溢出元素的内容区域。


可见:默认值。内容不被剪裁,可能会在内容框外呈现。
隐藏:内容被剪裁 - 不提供滚动机制。
滚动:内容被剪裁并提供滚动机制。
auto:应该为溢出的框提供滚动机制。
初始:设置此属性为其默认值。
继承从其父元素继承此属性。

【讨论】:

    【解决方案6】:

    您可以使用overflow-y: scroll 进行垂直滚动。

    <div  style="overflow-y:scroll; height:400px; background:gray">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      
     </div>

    【讨论】:

      【解决方案7】:

      对我来说,所有这些答案的问题在于它们没有响应。对于我不想要的父 div,我必须有一个固定的高度。我也不想花大量时间在媒体查询上大吃一惊。如果您使用 angular,您可以使用 bootstraps tabset,它会为您完成所有艰苦的工作。您将能够滚动内部内容并且它会响应。当您设置选项卡时,请这样做:$scope.tab = { title: '', url: '', theclass: '', ative: true }; ... 重点是,您不需要标题或图像图标。然后像这样在cs中隐藏选项卡的轮廓:

      .nav-tabs {
         border-bottom:none; 
      } 
      

      还有这个.nav-tabs &gt; li.active &gt; a, .nav-tabs &gt; li.active &gt; a:hover, .nav-tabs &gt; li.active &gt; a:focus {border:none;} 最后要删除不可见的选项卡,如果你不实现这个,你仍然可以点击:.nav &gt; li &gt; a {padding:0px;margin:0px;}

      【讨论】:

        【解决方案8】:

        上面的答案已经很好地解释了一半的问题。另一半。

        为什么不直接隐藏滚动条本身。 这样它看起来会更有吸引力,因为大多数人(包括我)都讨厌滚动条。 您可以使用此代码

        ::-webkit-scrollbar {
            width: 0px;  /* Remove scrollbar space */
            background: transparent;  /* Optional: just make scrollbar invisible */
        }
        

        【讨论】:

          【解决方案9】:

          参考这个要点:https://gist.github.com/zeoneo/5f9fff92a12aa6d9d42065b5df68e9d5

          它可能会帮助您使用 flex 创建布局并具有可自滚动的拆分窗格。

          body {
                          background-color: aquamarine;
                          margin: 0;
                          padding: 0;
                      }
                      .container {
                          height: 100vh;
                          display: flex;
                          flex-direction: column;
                          background-color: bisque;
                      }
                      .left {
                          width: 300px;
                          background-color: lightblue;
                          overflow: auto;
                          scroll-behavior: smooth;
          
                      }
                      .right {
                          flex:1;
                          background-color: lightcoral;
                          overflow: auto;
                          scroll-behavior: smooth;
                      }
                      .sidebar-item {
                          display: block;
                          height: 100px;
                          background-color: lightseagreen;
                          margin: 5px;
                      }
                      .header {
                          display: block;
                          height: 100px;
                          flex:none;
                          background-color: aqua;
                      }
                      .content {
                          flex:1;
                          background-color: brown;
                          display: flex;
                          overflow: auto;
                      }
          <html>
              <head>
                  <title>Hello World</title>
          
              </head>
              <body>
                  <div class="container">
                      <div class="header">
                          Header
                      </div>
                      <div class="content">
          
                      <div class="left myscroll">
                          <div class="sidebar-item"></div>
                          <div class="sidebar-item"></div>
                          <div class="sidebar-item"></div>
                          <div class="sidebar-item"></div>
                          <div class="sidebar-item"></div>
                          <div class="sidebar-item"></div>
                          <div class="sidebar-item"></div>
                          <div class="sidebar-item"></div>
                      </div>
                      <div class="right">
                          <div class="sidebar-item"></div>
                          <div class="sidebar-item"></div>
                          <div class="sidebar-item"></div>
                          <div class="sidebar-item"></div>
                          <div class="sidebar-item"></div>
                          <div class="sidebar-item"></div>
                          <div class="sidebar-item"></div>
                          <div class="sidebar-item"></div>
                          <div class="sidebar-item"></div>
                          <div class="sidebar-item"></div>
                          <div class="sidebar-item"></div>
                          <div class="sidebar-item"></div>
                          <div class="sidebar-item"></div>
                          <div class="sidebar-item"></div>
                          <div class="sidebar-item"></div>
                          <div class="sidebar-item"></div>
                      </div>
                  </div>
          
                  </div>
              </body>
          </html>

          【讨论】:

          • 虽然此链接可能会回答问题,但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改,仅链接答案可能会失效。 - From Review
          • @Dominique 您能否检查一下这是否符合质量要求。
          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2011-06-29
          • 1970-01-01
          • 2017-12-07
          • 2013-09-27
          • 2011-06-05
          • 1970-01-01
          相关资源
          最近更新 更多