css 橫向滾動隱藏滾動條_使用CSS滾動時如何隱藏滾動條?

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

輸出量

CSS | Hiding Scroll Bars | Example

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 橫向滾動隱藏滾動條

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

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

相關文章

DrawerLayout側滑詳解

前面我們說了自定義側滑菜單&#xff0c;也說了SlidingMenu的使用&#xff0c;這一節我們再來說下DrawerLayout。DrawerLayout是Support Library包中實現了側滑菜單效果的控件&#xff0c;可以說DrawerLayout是因為第三方控件如SlidingMenu等出現之后&#xff0c;google借鑒而出…

華為筆記本計算機在哪,新一代華為MateBook 的機會在哪里?

2017年5月23日 在德國柏林&#xff0c;華為正式面向全球消費者發布了MateBook系列新品——13英寸靈動商務筆記本MateBook X、12英寸時尚二合一筆記本MateBook E及15.6英寸商務影音筆記本MateBook D。今天筆記本市場似乎是一個比較穩定的市場&#xff0c;筆記本的銷量增長不快&a…

python 字符串 變量_檢查變量是否為字符串的Python程序

python 字符串 變量Python | 檢查變量是否為字符串 (Python | Check if a variable is a string) To check whether a defined variable is a string type or not, we can use two functions which are Python library functions, 要檢查定義的變量是否為字符串類型&#xff0c…

mysql shell

mysql 查詢10分鐘以內的數據:select *from t_agent where int_last_login>CURRENT_TIMESTAMP - INTERVAL 10 MINUTE; mysql關聯多表進行update更新操作UPDATE TrackINNER JOIN MVON Track.trkidMV.mvidSET Track.is_showMV.is_showWHERE trkid<6等同于UPDATE Track,MVSET…

kaggle計算機視覺比賽技巧,9. 計算機視覺 - 9.12. 實戰Kaggle比賽:圖像分類(CIFAR-10) - 《動手學深度學習》 - 書棧網 · BookStack...

9.12. 實戰Kaggle比賽&#xff1a;圖像分類(CIFAR-10)到目前為止&#xff0c;我們一直在用Gluon的data包直接獲取NDArray格式的圖像數據集。然而&#xff0c;實際中的圖像數據集往往是以圖像文件的形式存在的。在本節中&#xff0c;我們將從原始的圖像文件開始&#xff0c;一步…

qthread中獲取當前優先級_Linux中強大的top命令

top命令算是最直觀、好用的查看服務器負載的命令了。它實時動態刷新顯示服務器狀態信息&#xff0c;且可以通過交互式命令自定義顯示內容&#xff0c;非常強大。在終端中輸入top&#xff0c;回車后會顯示如下內容&#xff1a;top - 21:48:39 up 8:57, 2 users, load average: 0…

JavaScript中帶示例的String repeat()方法

JavaScript | 字符串repeat()方法 (JavaScript | String repeat() Method) The String.repeat() method in JavaScript is used to generate a string by repeating the calling string n number of times. n can be any integer from o to any possible number in JavaScript.…

Python生成驗證碼

#!/usr/bin/env python #coding:utf8 import random #方法1&#xff1a; str_codezxcvbnmasdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP0123456789new_codefor i in range(4):   new_coderandom.choice(str_code)print new_code #方法2&#xff1a; new_code[]def str_code…

snmp 獲得硬件信息_計算機網絡基礎課程—簡單網絡管理協議(SNMP)

簡單網絡管理協議(Simple Network Management Protocol)?除了提供網絡層服務的協議和使用那些服務的應用程序&#xff0c;因特網還需要運行一些讓管理員進行設備管理、調試問題、控制路由、監測機器狀態的軟件。這種行為稱為網絡管理。??隨著網絡技術的飛速發展&#xff0c;…

僵尸毀滅工程 服務器已停止運行,《僵尸毀滅工程》steam is not enabled錯誤解決方法...

Steam 上面的 Project Zomboid 因為帶有 VAC 所以建服開服需要 Steam服務器認證&#xff0c;這也是出現 steam is not enabled 錯誤主要原因&#xff0c;也是無法和普通零售正版所建的服務器聯機的罪魁禍首。分兩種情況(下面 Project Zomboid 均簡稱PZ)&#xff1a;1、steam版P…

spring boot 1.4默認使用 hibernate validator

spring boot 1.4默認使用 hibernate validator 5.2.4 Final實現校驗功能。hibernate validator 5.2.4 Final是JSR 349 Bean Validation 1.1的具體實現。 How to disable Hibernate validation in a Spring Boot project As [M. Deinum] mentioned in a comment on my original …

python mpi開銷_GitHub - hustpython/MPIK-Means

并行計算的K-Means聚類算法實現一&#xff0c;實驗介紹聚類是擁有相同屬性的對象或記錄的集合&#xff0c;屬于無監督學習&#xff0c;K-Means聚類算法是其中較為簡單的聚類算法之一&#xff0c;具有易理解&#xff0c;運算深度塊的特點.1.1 實驗內容通過本次課程我們將使用C語…

服務器修改開機啟動項,啟動項設置_服務器開機啟動項

最近很多觀眾老爺在苦覓關于啟動項設置的解答&#xff0c;今天欽編為大家綜合5條解答來給大家解開疑惑&#xff01; 有98%玩家認為啟動項設置_服務器開機啟動項值得一讀&#xff01;啟動項設置1.如何在bios設置硬盤為第一啟動項詳細步驟根據BIOS分類的不同操作不同&#xff1a;…

字符串查找字符出現次數_查找字符串作為子序列出現的次數

字符串查找字符出現次數Description: 描述&#xff1a; Its a popular interview question based of dynamic programming which has been already featured in Accolite, Amazon. 這是一個流行的基于動態編程的面試問題&#xff0c;已經在亞馬遜的Accolite中得到了體現。 Pr…

Ubuntu 忘記密碼的處理方法

Ubuntu系統啟動時選擇recovery mode&#xff0c;也就是恢復模式。接著選擇Drop to root shell prompt ,也就是獲取root權限。輸入命令查看用戶名 cat /etc/shadow &#xff0c;$號前面的是用戶名輸入命令&#xff1a;passwd "用戶名" 回車就可以輸入新密碼了轉載于:…

服務器mdl文件轉換,Simulink Project 中 MDL 到 SLX 模型文件格式的轉換

打開彈體示例項目并將 MDL 文件另存為 SLX運行以下命令以創建并打開“sldemo_slproject_airframe”示例的工作副本。Simulink.ModelManagement.Project.projectDemo(airframe, svn);rebuild_s_functions(no_progress_dialog);Creating sandbox for project.Created example fil…

vue 修改div寬度_Vue 組件通信方式及其應用場景總結(1.5W字)

前言相信實際項目中用過vue的同學&#xff0c;一定對vue中父子組件之間的通信并不陌生&#xff0c;vue中采用良好的數據通訊方式&#xff0c;避免組件通信帶來的困擾。今天筆者和大家一起分享vue父子組件之間的通信方式&#xff0c;優缺點&#xff0c;及其實際工作中的應用場景…

Java System類identityHashCode()方法及示例

系統類identityHashCode()方法 (System class identityHashCode() method) identityHashCode() method is available in java.lang package. identityHashCode()方法在java.lang包中可用。 identityHashCode() method is used to return the hashcode of the given object – B…

Linux中SysRq的使用(魔術鍵)

轉&#xff1a;http://www.chinaunix.net/old_jh/4/902287.html 魔術鍵&#xff1a;Linux Magic System Request Key Hacks 當Linux 系統不能正常響應用戶請求時, 可以使用SysRq小工具控制Linux. 一 SysRq的啟用與關閉 要想啟用SysRq, 需要在配置內核時設置Magic SysRq key (CO…

鏈接服務器訪問接口返回了消息沒有活動事務,因為鏈接服務器 SQLEHR 的 OLE DB 訪問接口 SQLNCLI10 無法啟動分布式事務。...

查看一下MSDTC啟動是否正確1、運行 regedt32&#xff0c;瀏覽至 HKEY_LOCAL_MACHINE\Software\Microsoft\MSDTC。添加一個 DWORD 值 TurnOffRpcSecurity&#xff0c;值數據為 1。2、重啟MS DTC服務。3、打開“管理工具”的“組件服務”。a. 瀏覽至"啟動管理工具"。b.…