首頁 > web前端 > css教學 > 主體

使用 CSS 使 div 水平滾動

王林
發布: 2023-09-12 19:09:02
轉載
1602 人瀏覽過

使用 CSS 使 div 水平滚动

在 CSS 中,我们可以通过设置适当的“over-flow”属性值来使 div 水平滚动。

首先,让我们了解为什么我们需要使 div 水平滚动。例如,父div元素的宽度为500px,或者屏幕尺寸为500px。现在,div 元素的内容是 1500px。因此,如果我们不让父 div 水平滚动,就会破坏应用程序的 UI。因此,我们可以使其可滚动,用户可以滚动查看不可见的内容。

语法

用户可以按照以下语法使 div 水平滚动。

.scroll { 
   width:<Width_of_div_element>; 
   overflow: scroll; 
}
登入後複製

在上面的语法中,我们使用了“width”和“overflow”属性来使 div 水平滚动。如果我们不指定元素的宽度,“overflow”属性不会受到影响。

示例 1

在下面的示例中,我们创建了 HTML div 并添加了一些文本内容。在 CSS 中,我们为 div 元素指定了“500px”固定宽度。此外,我们还设置了“scroll”作为溢出属性的值。

在输出中,用户可以观察到,当文本宽度大于类名为“scroll”的 div 的宽度时,div 元素中出现水平滚动条。

<html>
<head>
   <style>
      .scroll {
         margin: 5px;
         padding: 5px;
         border: 2px solid blue;
         width: 500px;
         overflow: scroll;
         white-space: nowrap;
         height: 50px;
      }
   </style>
</head>
<body>
   <h3>Using the <i> overflow-x: scroll </i> to make a div horizontally scrollable using CSS</h3>
   <div class = "scroll">
      The United States of America (USA) has the largest GDP in the world. In 2020, the nominal GDP of the United
      States was $21.43 trillion. China is the second-largest economy in the world, with a nominal GDP of $14.34
      trillion in 2020. Other countries with large GDPs include Japan, Germany, and the United Kingdom.
   </div>
</body>
</html>
登入後複製

示例 2

在下面的示例中,我们使用了“overflow: auto”CSS 属性来使 div 水平滚动。此外,我们还为 div 元素指定了固定宽度。 ‘auto’和‘scroll’值之间的主要区别是,当我们使用‘scroll’时,div始终保持可滚动,而当我们使用‘auto’时,div元素在发生溢出时变得可滚动。

<html>
<head>
   <style>
      .scroll {
         border: 2px solid green;
         width: 500px;
         overflow: auto;
         white-space: nowrap;
         height: 50;
      }
   </style>
</head>
<body>
   <h3>Using the <i> overflow: auto </i> to make a div horizontally scrollable using CSS</h3>
   <div class = "scroll">
      This is a sample text to put in the HTML div element. You can scroll this div horizontally.
   </div>
</body>
</html>
登入後複製

示例 3

在下面的示例中,我们使用了“overflow-x: auto”CSS 属性来使 div 水平滚动。我们已在父 div 内添加了单个子 div。

在输出中,用户可以观察到,由于我们使用了“auto”值,最初外部 div 是不可滚动的。当我们点击“添加 div”按钮时,它会使用 JavaScript 将子 div 添加到父 div,并且当您添加 5 到 7 个子 div 时,它会自动变得可滚动。

<html>
<head>
   <style>
      .scroll { border: 2px solid green; width: 500px; overflow-x: auto; white-space: nowrap; display: flex; flex-direction: row; }
      .inner { max-width: 250px; height: 100px; background-color: red; border: 2px dotted blue; margin: 3px; }
   </style>
</head>
<body>    
   <h3>Using the <i> overflow-x: auto </i> to make a div horizontally scrollable using CSS</h3>
   <div class = "scroll">
      <div class = "inner">
         Inner Div
      </div>
   </div>
   <button onclick = "addDiv()"> Add div </button>
</body>
<script>
   function addDiv() {
      // add the div element to the scroll div
      let scroll = document.querySelector('.scroll');
      let new_div = document.createElement('div');
      new_div.classList.add('inner');
      new_div.innerHTML = 'Inner Div';
      scroll.appendChild(new_div);
   }
</script>
</html>
登入後複製

示例 4

在下面的示例中,我们使用 CSS 设计了滚动条。首先,我们使 div 可以水平滚动以显示滚动条。之后,我们设置滚动条的背景颜色。此外,我们还设计了滚动条轨道和滑块。

在输出中,用户可以观察到好看的滚动条,并根据需求进行设计。

<html>
<head>
   <style>
      .scroll {
         width: 500px;
         overflow-x: auto;
         overflow-y: hidden;
         white-space: nowrap;
         border: 1px solid red;
         scrollbar-width: thin;
         scrollbar-color: grey;
      }
      /* styling the scroll bar */
      .scroll::-webkit-scrollbar { width: 10px; height: 10px }
      .scroll::-webkit-scrollbar-track { background: darkgray;}
      .scroll::-webkit-scrollbar-thumb { background: grey; border-radius: 10px; }
   </style>
</head>
<body>
   <h3>Using the <i> overflow-x: auto </i> to make a div horizontally scrollable using CSS</h3>
   <div class = "scroll">
      This div is horizontally scrollable. How are you? Do you like CSS? Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects. 
   </div>
</body>
</html>
登入後複製

用户学会了使用 CSS 的“overflow”属性使 div 水平滚动。在第一个示例中,我们使用了“overflow:scroll”CSS 属性。在第二个示例中,我们使用了“overflow: auto”CSS 属性。在第三个示例中,我们使用了“overflow-x: auto”CSS 属性;在最后一个示例中,我们使用 CSS 设计了滚动条。

以上是使用 CSS 使 div 水平滾動的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!