h5滾動隱藏滾動條_這 10 個值得開啟的隱藏功能,讓你的 Chrome 釋放更多潛力

b7aa2966a2d2a0a41eac2841fd7c960e.png

上次分享了讓 Chrome 瀏覽器用得更順手的地址欄命令,跟大家整理和介紹了多個 Chrome 地址欄命令,利用好這些命令工具能夠提升瀏覽器配置效率,讓你的 Chrome 瀏覽器用得更順手。

這次介紹的是 Chrome 內置的實驗功能,它被單獨放在了一個頁面中,很多酷炫好用的實驗性功能默認是關閉狀態,按需打開這些選項后,網頁瀏覽的速度、體驗、安全性等都會有相當不錯的提升,下面我收集了 10 個值得開啟的實驗功能,讓你的 Chrome 釋放更多潛在能力。

如何打開和查找實驗功能

89beb17d01515cd97f4561dfb7ea268c.png

Chrome 實驗功能頁面的打開方法相當簡單,只需要在地址欄輸入 chrome://flags,頁面分為可用(Available)和不可用(Unavailable)兩個標簽頁,頂部搜索欄支持即時搜索反饋結果。如果用戶明確知道實驗功能的選項名稱,可以通過chrome://settings/選項名稱類似的命令直接定位到對應的選項。

需要注意的是,更改任意 Chrome 實驗性 Flags 選項必須重啟瀏覽器才能使其生效,當然也可以通過「全部重置為默認值」按鈕來恢復 Flags 頁面所有選項為初始配置狀態。

47d7533f3c7803e2b35da7b53194690d.png

Overlay Scrollbars:自動收起滾動條

1a47725d2b97b2e0c0671365fa56b067.gif

頁面滾動條默認狀態會始終顯示在有側邊欄,占據了一定寬度的顯示區域,啟用 Overlay Scrollbars 選項,會使滾動條具備自動收起的特性,當頁面再滾動時,滾動條會收起消息,不占用額外的頁面空間。

Flash Overlay Scrollbars When Mouse Enter:滾動條跟隨鼠標移動出現

5ac50b33eb8303e38cb6432aaa5d97ab.gif

打開 Flash Overlay Scrollbars When Mouse Enter 后,會比前面介紹的 Overlay Scrollbars 選項顯得更智能,只有當鼠標進入滾動條區域時滾動條才會閃出,方便了下一步操作。

Smooth Scrolling:平滑滾動

e93caf30c18d529a3db293ed36ed80a4.gif

啟用 Smooth Scrolling 之后,在瀏覽長網頁使用鍵盤或者鼠標滾動頁面查看內容時,可以獲得非常平滑的內容滾動和過渡效果。如果對滾動尺寸和滾動動畫效果有更細致調整的需求,可以選擇安裝第三方擴展 SmoothScroll。

Tab Hover Cards:懸停標簽頁顯示網址

8cff38d7b2c3874f47f8c65191821528.png

Chrome 默認狀態下,當鼠標移動到標簽頁上時會主動顯示當前的網頁標題,碰到標題相同時很難區分來源。啟用 Tab Hover Cards 選項后,將會在鼠標懸停在標簽頁時,顯示網頁標題和網站 URL 信息(主機域名),幫助用戶快速判斷網頁的來源地址。

Tab Hover Card Images:懸停顯示網頁縮略圖

0513bbacd2e35efa52dbf6364eba8642.png

鼠標懸停到標簽頁時,不同的瀏覽器默認顯示的信息會有所區別,其中微軟家的 Edge 支持顯示網頁內容的縮略圖,啟用 Tab Hover Card Images 選項后,Chrome 同樣支持懸停顯示縮略圖的特性,幫助用戶進一步確認網頁的整體內容。

Desktop PWAs:桌面版 Chrome 支持 PWA 應用

67daf6a0ed935064c355d87a57a34aee.png

從 Chrome 73 正式版開始,面向 Windows、macOS 和 Linux 三大系統正式支持添加 PWA 應用,當打開支持 PWA 的網站時,通過瀏覽器右上角的漢堡菜單選項中會看到類似「安裝 XX」的按鈕,確認安裝后,PWA 應用就會被添加到桌面快捷方式。

如果你還是使用 v73 以前的版本,同樣可以在實驗功能選項中,通過啟用 Desktop PWAs,讓瀏覽器支持 PWA 應用。(備注:GitHub上有朋友總結了支持 PWA 的網站列表)

Parallel downloading:提升下載速度

e8b8903d45a62364c0222ba77d851581.png

Chrome 目前只支持單線程下載,這種下載方式容易導致下載出錯,而且速度并不理想,啟用 Parallel downloading 后可以讓瀏覽器支持并行下載,碰到大文件下載時會有明顯的速度提升。

除了 PC 版有豐富的 Flags 實驗功能外,Chrome for Android 平臺同樣有一些適用于移動特性的實驗功能,下面挑選了一些實用的選項,給大家做參考。

Android web contents dark mode:Chrome Android 版完整支持暗黑模式

1e13091e74c7cc8ac33345aba0088cad.png

最新的 Chrome Android 版已經提供了夜間模式功能,通過「設置 - 主題背景」即可在淺色調和深色調之間自由切換,但自帶的深色主題僅對地址欄、菜單、書簽等控件換上黑色模式,但對網頁內容本身并不生效。在這里,需要啟用 Android web contents dark mode,讓網頁也支持黑色模式。

Enable horizontal tab switcher:水平切換標簽頁

5229b83875b80b34c4fc5c9e8aa8699f.png

Chome 默認狀態是以垂直方式切換標簽頁,這一交互方式與最新 Android 系統多任務水平切換相比,可能會讓用戶使用上不是很習慣。啟用 Enable horizontal tab switcher 就可以實現水平切換網頁標簽頁。

Reader Mode triggering:支持閱讀模式

5a1b71b29653883a01ebd0a04b773bea.png

神奇瀏覽器、Edge 等第三方瀏覽器應用均提供閱讀模式功能,在閱讀文章時,幫助讀者有更專注的閱讀體驗。其實 Chrome 同樣支持閱讀模式,定位到 Reader Mode triggering,切換為 Always 狀態,瀏覽器將會在網頁下方顯示簡化版視圖的選項,這個就是閱讀模式的入口,而且還能更改主題顏色、字體以及字號大小。

結語

由于 chrome://flags大部分功能選項屬于測試階段,所以每一個 Chrome 版本變化,都會導致 Flags 選項有所變化,部分選項甚至可能被移除,而這次整理的功能選項,已經在最新版的 Chrome (PC 和 Android 平臺)上測試過,仍然存在和有效,嘗試打開這些被隱藏的小開關,提升瀏覽體驗、開啟好用的新功能,讓你的 Chrome 瀏覽器用得更順心。

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

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

相關文章

redux ngrx_另一個減少Redux(NGRX)應用程序樣板的指南

redux ngrxby Andrey Goncharov通過安德烈貢恰洛夫(Andrey Goncharov) 另一個減少Redux(NGRX)應用程序樣板的指南 (Yet another guide to reduce boilerplate in your Redux (NGRX) app) 我們在這里要覆蓋什么? (What are we gonna cover here?) In this article,…

leetcode 242. 有效的字母異位詞

給定兩個字符串 s 和 t ,編寫一個函數來判斷 t 是否是 s 的字母異位詞。 示例 1: 輸入: s “anagram”, t “nagaram” 輸出: true 示例 2: 輸入: s “rat”, t “car” 輸出: false 代碼 class Solution {public boolean isAnagram(String s, String t) {…

技巧:使用User Control做HTML生成

User Control大家肯定不會陌生,在使用ASP.NET的過程中,除了aspx頁面,最常見的就莫過于ascx了。ascx是一個有獨立邏輯的組件,提供了強大的復用特性,合理使用,能夠大大提高開發效率。通過User Control直接生成…

Spring Boot干貨系列:(二)配置文件解析

前言 上一篇介紹了Spring Boot的入門,知道了Spring Boot使用“習慣優于配置”(項目中存在大量的配置,此外還內置了一個習慣性的配置,讓你無需手動進行配置)的理念讓你的項目快速運行起來。所以,我們要想把S…

mysql常用操作記錄

(1)判斷表中一個字段是空,可為:字段名 IS NULL(2)類似oracle的decode作用:IF(字段名>0,字段名,0)(3)時間格式(年-月-日):DATE_FORM…

小愛音響調用php接口_阿里API調用二(PHP)

接口地址拼合成功后,用curl函數post獲取阿里返回的完整數據,將地址傳入getContent()方法中,絕對能獲取用戶數據。public function getContent($url){$ch curl_init();// 初始化curl_setopt($ch,CURLOPT_URL,$apiprourlall);curl_setopt($ch,…

leetcode 452. 用最少數量的箭引爆氣球(貪心算法)

在二維空間中有許多球形的氣球。對于每個氣球,提供的輸入是水平方向上,氣球直徑的開始和結束坐標。由于它是水平的,所以縱坐標并不重要,因此只要知道開始和結束的橫坐標就足夠了。開始坐標總是小于結束坐標。 一支弓箭可以沿著 x…

javascript編程題_如何開始使用JavaScript進行競爭性編程

javascript編程題by Priyabrata Biswas通過Priyabrata Biswas 如何開始使用JavaScript進行競爭性編程 (How to get started with Competitive Programming in JavaScript) If you’re not familiar with competitive programming, basically it is a mind sport with the aim …

hibernate Criteria(條件查詢接口)

Criteria&#xff08;條件查詢接口&#xff09; // 1.簡單查詢 List<Customer> list session.createCriteria(Customer.class).list();// 2.條件查詢: Criteria criteria session.createCriteria(Customer.class); criteria.add(Restrictions.eq("name",&quo…

ElastciSearch簡單總結(筆記)

前言&#xff1a; 前段時間在項目中使用了es,作為一個當前比較流行的分布式搜索引擎&#xff0c;在學習和使用它的過程中&#xff0c;踩了不少坑&#xff0c;這篇文章先簡單整理了一下&#xff0c;后續會整理一下之前踩過的一些坑。 1. ElastciSearch是什么 ElasticSearch是一…

記一次ArrayList產生的線上OOM問題

前言&#xff1a;本以為(OutOfMemoryError)OOM問題會離我們很遠&#xff0c;但在一次生產上線灰度的過程中就出現了Java.Lang.OutOfMemoryError:Java heap space異常&#xff0c;通過對線上日志的查看&#xff0c;最終定位到ArrayList#addAll方法中&#xff0c;出現這個問題的原…

leetcode 222. 完全二叉樹的節點個數(dfs)

給出一個完全二叉樹&#xff0c;求出該樹的節點個數。說明&#xff1a;完全二叉樹的定義如下&#xff1a;在完全二叉樹中&#xff0c;除了最底層節點可能沒填滿外&#xff0c;其余每層節點數都達到最大值&#xff0c;并且最下面一層的節點都集中在該層最左邊的若干位置。若最底…

css 計算屬性的應用_如何使用一點CSS Grid魔術設計計算器應用

css 計算屬性的應用by Deepika Gunda由Deepika Gunda 如何使用一點CSS Grid魔術設計計算器應用 (How to use a little CSS Grid magic to design a calculator app) This article is a quick intro to CSS Grid. We will be making a calculator using it.本文是CSS Grid的快速…

vc調試大全

一、調試基礎 調試快捷鍵 F5&#xff1a; 開始調試 ShiftF5: 停止調試 F10&#xff1a; 調試到下一句&#xff0c;這里是單步跟蹤 F11&#xff1a; 調試到下一句&#xff0c;跟進函數內部 ShiftF11: 從當前函數中跳出 CtrlF10: 調試到光標所在位置 F9&#xff1a; …

Google-Guava-EventBus源碼解讀

Guava是Google開源的一個Java基礎類庫&#xff0c;它在Google內部被廣泛使用。Guava提供了很多功能模塊比如&#xff1a;集合、并發庫、緩存等&#xff0c;EventBus是其中的一個module&#xff0c;本篇結合EventBus源碼來談談它的設計與實現。 概要 首先&#xff0c;我們先來預…

leetcode 1370. 上升下降字符串

給你一個字符串 s &#xff0c;請你根據下面的算法重新構造字符串&#xff1a; 從 s 中選出 最小 的字符&#xff0c;將它 接在 結果字符串的后面。 從 s 剩余字符中選出 最小 的字符&#xff0c;且該字符比上一個添加的字符大&#xff0c;將它 接在 結果字符串后面。 重復步驟…

mysql 設置事物自動提交_mysql事務自動提交的問題

1&#xff1a;mysql的aut0commit配置默認是開啟的&#xff0c;也就是沒執行一條sql都會提交一次&#xff0c;就算顯示的開啟事務也會導致多條SQL不在一個事務中&#xff0c;如果需要相關的SQL在同一個事務中執行&#xff0c;那么必須將autocommit設置為OFF&#xff0c;再顯式開…

rest laravel_如何通過測試驅動開發來構建Laravel REST API

rest laravelby Kofo Okesola由Kofo Okesola 如何通過測試驅動開發來構建Laravel REST API (How to build a Laravel REST API with Test-Driven Development) There is a famous quote by James Grenning, one of the pioneers in TDD and Agile development methodologies:T…

python之numpy

numpy是一個多維的數組對象&#xff0c;類似python的列表&#xff0c;但是數組對象的每個元素之間由空格隔開。 一、數組的創建 1.通過numpy的array(參數)&#xff0c;參數可以是列表、元組、數組、生成器等 由arr2和arr3看出&#xff0c;對于多維數組來說&#xff0c;如果最里…

git 上傳

轉載于:https://www.cnblogs.com/benbentu/p/6543154.html