作者mayuyu (‵・ω・′)
看板Browsers
标题[推荐] 用拖曳的方式滑动网页和滑鼠滚轮平滑滚动
时间Sat Jan 10 21:09:37 2015
如果你习惯手机上以手指滑动来滚动画面的操作方式,
用没有触控功能的装置可能会觉得要移动滑鼠到侧边的卷动条上
才能拉动画面很麻烦,如果在任意位置都可以用拖曳的方式
来平滑卷动画面,操作上会应该会更便利。
Firefox和Chrome都有扩展可以让我们用滑鼠模拟触控萤幕的滑动
方式来卷动网页,也可以用滚轮来达成类似手机上平滑滚动的效果。
1.用拖曳的方式滑动网页
安装拖曳滑动的扩展,便可以在没有触控功能的设备上,
用拖曳的方式上下左右滑动画面,使画面惯性的卷动,
就像在手机上用手指滑动萤幕的效果。
这样就可以在画面上任何位置,都可以拖动网页,
而不用移动滑鼠到最旁边的卷动条上,才能卷动画面。
Fx扩展 Grab and Drag
http://ppt.cc/KMwm
Chrome扩展 chromeTouch
http://ppt.cc/0~WS
你可以选择是要按住左键来拖动画面,
还是按住中键来拖动画面,或者是按住右键来拖动画面。
由於我的右键已经给FireGestures使用,
中键又不好按,所以我是设定用左键来拖曳画面。
不过选取文字的时候同样需要用到左键,
所以必须设定在文字区的时候启用或禁用拖曳的功能。
我的设定(Grab and Drag):
启用惯性卷动
启用文字切换
不要拖曳连结(拖曳连结开新分页用Easy DragToGo处理)
Easy DragToGo
http://ppt.cc/BuCH
文字切换 当游标在文字区水平拖曳或点击时,切换为文字选择模式。
当游标在非文字区拖曳或点击时,切换为拖曳模式。
(也可以设定为当游标移动到文字区时自动切换为文字选择模式,
离开文字区时自动切换为拖曳模式,不过我觉得点击切换比较好用)
拖曳倍率 4倍(滑鼠实际移动距离和画面卷动距离的倍率,
倍率越高的话滑鼠移动一点点距离画面就会上下卷动更大的范围)
惯性卷动 时间敏感度和减速敏感度都是最小
摩擦力则是6
黑名单 排除在BBSFox的telnet://*、ssh://*页面上使用拖曳
开启拖曳模式时,要选取超连结上的文字会变得很不好选取,
可以点击Grab and Drag的工具按钮来暂时关闭拖曳,
不过要移动到Grab and Drag的按钮上去做点击也很麻烦,
所以可以新增一个FireGestures的脚本手势,
在原地很小的范围内按住滑鼠右键画一个手势,
就可以切换Grab and Drag的启用/关闭状态。
第一种方法:
新增一个FireGestures的脚本手势,
内容为送出Grab and Drag的切换开关命令:
gadGrabAndDragExtension.gadToggle();
第二种方法,用FireGestures送出热键,
Grab and Drag有提供热键来切换启用禁用状态,
预设是alt+shift+D,用FireGestures画一个手势来送出alt+shift+D,
由於控制热键不能用FireGestures的sendKeyEvent,
所以内容必须写成下面这样:
var evt = document.createEvent("KeyEvents");
evt.initKeyEvent(
"keydown",
true,
true,
null,
false, // holds Ctrl key
true, // holds Alt key
true, // holds Shift key
false, // holds Meta key
evt.DOM_VK_D, // presses a special key,
0 // presses a normal key, e.g. "A".charCodeAt(0),
);
gBrowser.contentDocument.documentElement.dispatchEvent(evt);;
这样就可以在原地画手势随时切换开关了。
2.使用滑鼠滚轮来平滑滚动
习惯使用滚轮的话,也可以用滑鼠滚轮来做到手机上的
平滑卷动和惯性滚动的效果。
Fx扩展 Yet Another Smooth Scrolling
http://ppt.cc/VzUk
Chrome扩展 Chromium Wheel Smooth Scroller
http://ppt.cc/mSlW
我的设定:
卷动的范围大小 150
平滑度卷动开始瞬间 最小
平滑度 89.0
加速敏感度 416
黑名单 排除
www.plurk.com/*
*.jpg
*.png
....等等
因为我有用ImageTweak扩展
http://ppt.cc/Npll
在新分页开启图片的时候滚轮是放大缩小图片用的,
所以要排除Yet Another Smooth Scrolling在图片上作用。
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 61.219.36.86
※ 文章网址: http://webptt.com/cn.aspx?n=bbs/Browsers/M.1420895379.A.7D7.html
1F:推 kuro: 01/10 21:13
2F:推 abccbaandy: chromeTouch 侦测文字的功能常常失效... 01/10 21:26
3F:→ mayuyu: chromeTouch在twitter的右侧也不能拖曳 01/10 23:27
4F:→ mayuyu: 我觉得Grab and Drag的点击切换模式比较好用 01/10 23:27
5F:→ mayuyu: 而且在firefox上滚动非常顺 01/10 23:27
6F:→ mayuyu: 不知道chrome上有没有其他比较好用的模拟触控滑动的扩展 01/10 23:28
Scrollbar Anywhere
http://ppt.cc/Hd~V
文字区的判断比chromeTouch准确。
预设是按下右键卷动,而且是Grab and Drag的卷动条模式。
(模拟在卷动条上拖曳的卷动模式,但是不用移动到侧边的卷动条上,
而是在任意位置点一下就可以开始卷动)
可以自行改为按下中键或者左键卷动,同时开启拖曳滑动的模式,
和Grab and Drag一样可以设定滑动的速度和停止的摩擦力,
可以做比较精细的惯性滑动的控制。
我短暂测试时随便乱调的设定:
Button: Left
☑ Don't drag when clicking on text
☑ Use Grab-and-drag style scrolling
Scaling: 400%
Friction: 5
在twitter的右侧也可以拖曳滑动。
按住ctrl或者alt或者shift三个键任一键,
就可以暂时关闭卷动和拖曳滑动,
所以也可以不要开启文字区的判断,
要选择文字的时候按下ctrl来禁用拖曳即可。
或者是没有使用右键滑鼠手势,可以使用预设的右键来做卷动,
或者是滑鼠中键很好按,也可以使用中键来做卷动,
这样就没有选择文字判断的问题。
不过我滑起来会有一点卡卡的,还是没有Grab and Drag那麽顺。
还有没有更好的扩展?
※ 编辑: mayuyu (61.219.36.146), 01/11/2015 16:14:30
7F:推 dosvidania: 2. SmoothScroll 也不错 预设就很好用 01/11 17:03
8F:推 sate5232: 推 Grab and Drag 从当初Fx1.5就用到现在 01/12 17:54
9F:→ mayuyu: Grab and Drag在Pocket和Evernote Clearly页面上 01/12 19:58
10F:→ mayuyu: 看文章可以滚来滚去的 真的超方便 01/12 19:58
11F:→ mayuyu: 感觉好像在用平板app 01/12 19:59