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.mzph.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