scrollIntoView将指定元素定位到浏览器顶部,底部,中间
2018-01-15 21:40
369 查看
用法:
看一下浏览器兼容性,貌似不支持block的蛮多,我做了一个浏览器的判断,在谷歌,Opera浏览器可以用block,定位到中间,else其他浏览器就老老实实定位到顶部。
浏览器的判断方法:
//浏览器判断
function myBrowser() {
var userAgent = navigator.userAgent;
var isOpera = userAgent.indexOf("Opera") > -1;
if (isOpera) {
return "Opera"
};
if (userAgent.indexOf("Firefox") > -1) {
return "FF";
}
if (userAgent.indexOf("Chrome") > -1) {
return "Chrome";
}
if (userAgent.indexOf("Safari") > -1) {
return "Safari";
}
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
return "IE";
};
}
var mb = myBrowser();
当然这是一种简单的方法,要兼容多个浏览器的话,建议换一种方式。
比如:js实现页面到滚动到指定位置
再如:
用js将页面定位到某个位置
var element = document.getElementById("box"); element.scrollIntoView();//顶部 element.scrollIntoView(false);//底部 element.scrollIntoView({block: "end"}); element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});
看一下浏览器兼容性,貌似不支持block的蛮多,我做了一个浏览器的判断,在谷歌,Opera浏览器可以用block,定位到中间,else其他浏览器就老老实实定位到顶部。
element.scrollIntoView();
浏览器的判断方法:
//浏览器判断
function myBrowser() {
var userAgent = navigator.userAgent;
var isOpera = userAgent.indexOf("Opera") > -1;
if (isOpera) {
return "Opera"
};
if (userAgent.indexOf("Firefox") > -1) {
return "FF";
}
if (userAgent.indexOf("Chrome") > -1) {
return "Chrome";
}
if (userAgent.indexOf("Safari") > -1) {
return "Safari";
}
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
return "IE";
};
}
var mb = myBrowser();
当然这是一种简单的方法,要兼容多个浏览器的话,建议换一种方式。
比如:js实现页面到滚动到指定位置
再如:
用js将页面定位到某个位置
参考网址:https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
相关文章推荐
- 页面元素的定位scrollintoview
- [前端] scrollIntoView 滚动当前元素,进入浏览器的可见区域
- 绝对定位和overflow-y: scroll实现不使用fixed固定定位将元素固定在页面顶部或底部
- 使用scrollIntoView方法定位页面元素---小结
- DataGrid的ScrollIntoView方法导致 an argument out of range exception(指定的参数已超出有效值的范围)错误的解决
- h5之scrollIntoView控制页面元素滚动
- 页面定位 scrollIntoView()
- [原]提交页面的定位--scrollIntoView的用法
- android listview/ScrollView 去除顶部下拉时的半月形阴影和上下滑动顶部和底部的虚化
- JS获得指定元素距离浏览器顶部的距离offsetTop
- javascript通过改变滚动条滚动来显示某些元素的scrollIntoView()方法
- android scrollview底部上滑 切换activity / scrollview滚动同时 顶部progressbar同步
- 微信小程序监听scroll-view滑动到顶部、底部、左边、右边
- 提交页面的定位--scrollIntoView的用法
- 聊天窗口内容滚动到底部的方法scrollTop和scrollIntoView
- android里,addContentView()动态增加view控件,并实现控件的顶部,中间,底部布局
- Scrollview&RecycleView&ListView&Viewpager的顶部/底部阴影颜色改变
- android listview/ScrollView 去除顶部下拉时的半月形阴影和上下滑动顶部和底部的虚化
- 仿微信 QQ聊天布局 顶部title固定,底部是EditText,中间是RecyclerView,弹出软键盘,RecyclerView上移,标题不动
- scrollIntoView() 页面定位