一、JS获取滚动条位置
1、获取坐标：
IE (event.x event.y)
2、获取滚动条位置(网页最前面没有)：
document.body.scrollTop （滚动条离页面最上方的距离）
document.body.scrollLeft （滚动条离页面最左方的距离）
当我用js获取当前垂直或者水平方向滚动条位置的时候，使用"document.body.scrollTop"或者"document.body.scrollLeft"是无效的，得到的数值永远是0。但是，当写在“onscroll”事件里面的时候，上述方法可以获得当前滚动条的位置。
3、当网页最前面有以下内容：
document.documentElement.scrollTop （滚动条离页面最上方的距离）
document.documentElement.scrollLeft （滚动条离页面最左方的距离）
所以为了准确取得当前滚动条的位置，正确的使用方法是：
document.documentElement.scrollTop：垂直方向
document.documentElement.scrollLeft：水平方向
二、通过window.onscroll来实现部分内容的适时显示
1、实现代码
window.οnscrοll=function(){
var fixed=document.getElementById("fixed"); //获取需要适时显示的元素节点
var scrollTop = document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop; //滚动条与页面顶部距离（包括pc端和移动端），window.pageYOffset和document.body.scrollTop用于获取移动端距离
var allHeight=window.screen.height; //获取整个页面的高度
console.log("滚动条与页面顶部距离："+scrollTop);
console.log("整个屏幕的高度："+allHeight);
if(scrollTop>allHeight*1.2){ //给出判断条件，即高度如何时进行以下逻辑
fixed.className="fix"; //给获取的元素节点加上相应的样式
}else{
fixed.className=" "; //给获取的元素节点去除相应的样式
}
}
三、clipboard.js（插件）实现复制粘贴
1、 引入插件
2、基本使用
首先需要您需要通过传递DOM选择器，HTML元素或HTML元素列表来实例化它。
new Clipboard('.btn');
1、用一个元素当触发器来复制另一个元素的文本,data-clipboard-target属性后需要跟属性选择器
id="foo" value="https://github.com/zenorocha/clipboard.js.git">
另外还有另外一个属性data-clipboard-action属性，以指定是要要么copy还是要cut操作。默认情况下是copy。cut操作只适用于或
2、从属性中复制文本，不需要另一个元素当触发器，可以使用data-clipboard-text属性，在后面放上需要复制的文本.
3、其他说明
1、通过运行检查clipboard.js是否支持Clipboard.isSupported()，返回true则可以使用。
2、显示一些用户反馈或捕获在复制/剪切操作后选择的内容。操作，文本，触发元素
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); e.clearSelection(); }); clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger); });
3、该插件使用的是事件委托的方式来触发，所以大大减少了对dom的操作。
4、高级使用
如果你不想修改你的HTML，那么你可以使用一个非常方便的命令API。所有你需要做的是声明一个函数，写下你想要的操作，并返回一个值。下面是一个对不同id的触发器返回不同的值的例子。具体的使用方法请看https://clipboardjs.com
四、微信遮罩层提示浏览器下载（H5开发）
1、基本代码
(1)、原生js
var Terminal = {
// 辨别移动终端类型
platform : function(){
var u = navigator.userAgent;
var app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
iOS: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
Android: u.indexOf('Android') > -1 ,//android终端
Uc: u.indexOf('Linux') > -1, //uc浏览器
iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应用程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
qq: u.match(/\sQQ/i) == " qq" //是否QQ
};
},
// 辨别移动终端的语言：zh-cn、en-us、ko-kr、ja-jp...
language : (navigator.browserLanguage || navigator.language).toLowerCase()
}
// 根据不同的终端，跳转到不同的地址
var
styles ='',
domDiv = styles +'',
doms = domDiv +'
';
doms +='
',
domh = domDiv +'
';
domh +='
',
theUrl = '',
isThis = Terminal.platform;
//判断是否为移动终端
if(!isThis.mobile){
theUrl = 'http://resource.ws.kukuplay.com/zhangyu/download/zhangyutv-3.1.1-main-release.apk';
}else if(
isThis.Android){
//判断是否为Android设备
if(
isThis.weixin){
//判断是否为微信端
$("body").append(doms);
self.downloadInWeixin = true; //让微信浏览器识别下载
window.location.hash = 'download';
return;
}else{
$(".pop-weixin").hide();
}
theUrl = 'http://resource.ws.kukuplay.com/zhangyu/download/zhangyutv-3.1.1-main-release.apk'; //安卓下载链接
}else if(
isThis.iPhone || isThis.iPad){
//判断是否为ios端
if(
isThis.weixin){
//判断是否为微信端
$("body").append(domh);
self.downloadInWeixin = true; //让微信浏览器识别下载
window.location.hash = 'download';
return;
}else{
$(".pop-weixin").hide();
}
theUrl = 'https://apk.zhangyu.tv/download/ota/'; //ios下载链接
}
if(theUrl != ""){
if(!isThis.mobile){
location.href = theUrl;
}else if(isThis.iPhone || isThis.iPad){
location.href = theUrl;
}else if(isThis.Android){
location.src = theUrl;
}
}else{
theUrl="" ;
}
}
补充:
ES6语法
export function browser() {
const u = navigator.userAgent;
return {
mobile: !!u.match(/AppleWebKit.*Mobile.*/),
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
iPhone: u.indexOf('iPhone') > -1,
iPad: u.indexOf('iPad') > -1,
isWx: u.indexOf('MicroMessenger') > -1,
isQQ: u.indexOf('QQ/') > -1,
isQQbrowser: u.indexOf('QQBrowser'),
isWeiBo: u.indexOf('weibo') > -1,
isLive: window.location.href.indexOf('islive') > -1
};
}
https://files.cnblogs.com/files/huangfeihong/%E8%85%BE%E8%AE%AF%E8%90%A5%E9%94%80QQ%E4%BA%A7%E5%93%81%E5%B8%AE%E5%8A%A9%E6%96%87%E6%A1%A3.rar
