css 橫向滾動隱藏滾動條
Introduction:
介紹:
It is always nice to have a responsive website or web page, to create such websites or web pages we have to make use of our developing skills to a great extent to bring about the functionality as well as the appearance of the web page or website. CSS helps in making such tasks easy, as CSS is used for styling and various style attributes are used profoundly to create a very responsive yet attractive website or web page. Anyone can create websites or web pages with ample knowledge but all the creative and unique websites or web pages demand something beyond the fundamental knowledge skills.
擁有響應式網站或網頁總是很高興,要創建這樣的網站或網頁,我們必須在很大程度上利用我們的開發技能來實現網頁或網站的功能以及外觀。 CSS有助于簡化此類任務,因為CSS用于樣式設置,并且各種樣式屬性被深度使用來創建響應Swift但引人入勝的網站或網頁。 任何人都可以創建具有豐富知識的網站或網頁,但是所有具有創造性和獨特性的網站或網頁都需要一些基本知識以外的知識。
As we know, we can use CSS for styling our web page or website therefore the topic of this section is also related to CSS. So let us keep moving and see how can we hide scroll bars while using CSS, which would be very cool, right? So how do we do that? Is there a method? Is there a particular property to do it? Well, if you are wondering if there is a certain property to achieve this then you are correct. Let us have a look at this property!
眾所周知,我們可以使用CSS來設置網頁或網站的樣式,因此本節的主題也與CSS有關。 因此,讓我們繼續前進,看看如何在使用CSS時隱藏滾動條,這非常酷,對吧? 那么我們該怎么做呢? 有沒有辦法? 有特定的屬性嗎? 好吧,如果您想知道是否有某種屬性可以實現此目標,那么您是正確的。 讓我們看看這個屬性!
Property:
屬性:
To hide the scroll bar you may use -WebKit- and display it to none. Well, why only WebKit? The answer to that is that WebKit property is supported by a large group of browsers, for example, chrome, safari, etc. Therefore it would be convenient to implement WebKit property if you are planning to hide the scroll bar. Although there are properties for different browsers which are listed below,
要隱藏滾動條 ,可以使用-WebKit-并將其顯示為none 。 好吧,為什么只有WebKit? 答案是,大量瀏覽器(例如chrome,safari等)都支持WebKit屬性。因此,如果您打算隱藏滾動條,則可以方便地實現WebKit屬性。 盡管下面列出了不同瀏覽器的屬性,
For Firefox you can use -Moz-.
對于Firefox,您可以使用-Moz- 。
For Internet Explorer, you can use -ms-.
對于Internet Explorer,可以使用-ms- 。
Note:
注意:
It would be pretty cool if we can hide our scroll bar while scrolling but there are some very crucial points that you must consider before proceeding to implement this method.
如果我們可以在滾動時隱藏滾動條,那將非常酷,但是在繼續實現此方法之前,您必須考慮一些非常關鍵的要點。
You should prefer to hide the scroll bar only when you are sure that the content of your website or web page would still be visible to the user because the user might skip the content.
僅當您確定網站或網頁的內容仍對用戶可見時,才應選擇隱藏滾動條,因為用戶可能會跳過該內容。
You should try to avoid horizontal scrolling on your web pages or websites and you must also try to avoid hiding horizontal scroll bars, as it becomes difficult to read the content.
您應嘗試避免在網頁或網站上進行水平滾動,并且還應避免隱藏水平滾動條,因為這樣會難以閱讀內容。
Even if you still want to hide the scroll bar, then place all the important information about the web page or web site above the fold.
即使您仍想隱藏滾動條,也應將有關網頁或網站的所有重要信息放在折疊上方。
Syntax:
句法:
element::-webkit-scrollbar{
display:none;
}
Example:
例:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #f40;
color: #fff;
width: 200px;
height: 200px;
border: 1px dotted black;
overflow-y: scroll;
}
div::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body>
<h2>Hide scrollbar while scrolling</h2>
<p>Scroll the below div element</p>
<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.
</div>
</body>
</html>
Output
輸出量

In the above example, try to run the code and scroll the content inside the div element.
在上面的示例中,嘗試運行代碼并滾動div元素內的內容。
翻譯自: https://www.includehelp.com/code-snippets/how-to-hide-scroll-bar-while-scrolling-using-css.aspx
css 橫向滾動隱藏滾動條