css div滾動_如何使用CSS創建可垂直滾動的div？

css div滾動

Introduction:

介紹：

Dealing with divs has become a regularity and divs are used for many purposes like to structure our code and to segregate our various sections of codes. Besides, we are also aware of many properties that we can imply or amend over divs to make our website or web page responsive but there are times we tend to forget some of the methods or properties which could be used while developing a website or web page and sometimes these properties also make our work easy, as sometimes they happen to reduce the number of codes. So one must always keep learning about various properties to explore new ways for developing a website or web page. With that note in mind, we must move forward with our topic.

處理div已經成為一種常態，并且div用于許多目的，例如構造我們的代碼和分離我們的代碼的各個部分。此外，我們也意識到我們可以暗示或修改div以使我們的網站或網頁具有響應性的許多屬性，但有時我們會忘記開發網站或網頁時可以使用的某些方法或屬性有時這些屬性也使我們的工作變得容易，因為有時它們恰好減少了代碼數量。因此，必須始終了解各種屬性，以探索開發網站或網頁的新方法。牢記這一點，我們必須推進我們的主題。

The task:

任務：

To create a vertically scrollable div is not a challenging task as it seems but as mentioned earlier, one must keep learning new methods or properties, besides there might come a time when you will require a vertically scrollable div and at that time you would know the exact answer to your problem, all thanks to this article. Well, now that we have established an understanding of the importance of this discussion, so without much further adieu, let us move on with the task.

創建一個垂直可滾動的div看起來并不是一項艱巨的任務，但是正如前面提到的，人們必須不斷學習新的方法或屬性，此外，有時候可能需要垂直可滾動的div，那時您會知道對您問題的確切答案，這一切都歸功于本文。好了，既然我們已經對這次討論的重要性有了一個了解，那么就不用多說了，讓我們繼續進行下去。

Property used:

使用的屬性：

As mentioned earlier, creating a vertically scrollable div is not tough, some things here and there and you will catch up to it in no time. For creating a vertically scrollable div for your website or web page you have to make use of a property known as overflow property. You might as well be familiar with this property and its behavior. So, by using overflow one can create a vertically scrollable div. As we all know that Overflow property takes up a certain amount of values such as overflow-x: hidden and overflow-y: auto. By making use of these values you will be able to create vertical and horizontal scroll bars.

如前所述，創建一個垂直可滾動的div并不困難，到處都是，您很快就會趕上它。為了為您的網站或網頁創建一個垂直滾動的div，您必須使用一個被稱為溢出屬性的屬性。您可能還熟悉此屬性及其行為。因此，通過使用溢出可以創建一個垂直滾動的div。眾所周知，Overflow屬性會占用一定數量的值，例如overflow-x：hidden和overflow-y：auto。通過使用這些值，您將能夠創建垂直和水平滾動條。

Solution:

解：

To create a vertical scroll bar use x and y-axis and you should set the overflow-x property as hidden and overflow-y property as auto. By doing so the horizontal scroll bar property would hide automatically and only vertical scroll bar would be displayed. Therefore, the scroll bar created in the process would be vertically.

要創建垂直滾動條，請使用x和y軸，您應將overflow-x屬性設置為hidden ，將overflow-y屬性設置為auto 。這樣，水平滾動條屬性將自動隱藏，并且僅顯示垂直滾動條。因此，在該過程中創建的滾動條將是垂直的。

Syntax:

句法：

    Element{
overflow-x:hidden;
overflow-y:auto;
}

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #006969;
color: #fff;
width: 400px;
height: 100px;
overflow-x: hidden;
overflow-y: auto;
text-align: justify;
}
</style>
</head>
<body>
<h1>create a vertically scrollable div</h1>
<div>
This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
This is IncludeHelp. This is IncludeHelp. This is IncludeHelp.
</div>
</body>
</html>

CSS | create a vertically scrollable div Example

In the above example, the div is vertically scrollable.

在上面的示例中， div可垂直滾動 。

Try yourself:

嘗試一下：

Pretty easy right? All we had to do was make use of a very familiar property known as Overflow property and set its x-axis value to hidden and y-axis value auto and bam! A vertical scrollable div emerged as a result. So go ahead and try this new learned method on your own by taking the help of examples. And if you think you need some assistance our writers and experts are available for you at https://ask.includehelp.com/.

很容易吧？我們要做的就是利用一個非常熟悉的屬性，即Ove??rflow屬性，并將其x軸值設置為hidden和y軸值auto和bam！結果出現了一個垂直的可滾動div。因此，請繼續通過示例來嘗試這種新學到的方法。如果您認為需要幫助，請訪問https://ask.includehelp.com/，我們的作家和專家將為您提供幫助。

翻譯自: https://www.includehelp.com/code-snippets/how-to-create-a-vertically-scrollable-div.aspx

css div滾動

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/542175.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/542175.shtml
英文地址，請注明出處：http://en.pswp.cn/news/542175.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！