如何解决Jquery插件nicescroll在ie8中出现的滚动问题
1个回答
展开全部
jquery.nicescroll.js是jquery的开源插件，使用也非常简单，如何使用网上已讲的非常详细了，不会的
可以参考：http://nicescroll.areaaperta.com/
nicescroll的兼容性非常强，基本上所有的浏览器都可以使用，但是这么完美的插件还是存在它不足的地方。
在ie8上，偶尔会出现这样的情况：
页面会随着鼠标箭头的移动而滚动。根据我的个人经验，当你用鼠标按着滚动条上下滑动3s时会出现上述情况，当你再次用鼠标按着滚动条3s不动时，该现象会消失，这是为什么呢？
个人认为，该滚动条是设置在body或html上时会出现这种情况，如果在html内部，存在小范围的滚动条就没有这种情况了。所以，解决在ie8(及以下浏览器)中出现的这种问题，就是隐藏存在于body或html上的滚动条，在body下新增一个div标签，将滚动条添加在该div标签上。
Html代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery NiceScroll plugins</title>
<script src="http://cdn.staticfile.org/jquery/1.9.0/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/nicescroll/3.5.4/jquery.nicescroll.min.js"></script>
<style type="text/css">
html,body{overflow-x:hidden;overflow-y:hidden;width:100%;height:100%;margin:0px;padding:0px;}
.txtblock{width:600px;height:200px;margin:10px auto;padding:0px;z-index:9999;}
</style>
<script>
$(document).ready(function() {
$(".txtblock").niceScroll({styler:"fb",cursorcolor:"#000",cursorborderradius:"5px"});
$("#divexample2").niceScroll("#wrapperexample2",{cursorcolor:"#0F0",boxzoom:true});
});
</script>
</head>
<body>
<div class="txtblock">
<h1>Scrollable div (with wrapper div), custom color and zoom feature</h1>
<p>You can call zoom-in/zoom-out with double click on div or click on the upper icon (or use pitch gesture on ipad). When you use wrapper, Nicescroll try to enable hardware accelerated scrolling.</p>
<div id="divexample2" style="overflow: auto; position: relative; outline: none;height:150px; width:400px;">
<div id="wrapperexample2" >
<p>Google began in January 1996 as a research project by Larry Page and Sergey Brin when they were both PhD students at Stanford University in California.[30]
While conventional search engines ranked results by counting how many times the search terms appeared on the page, the two theorized about a better system that analyzed the relationships between websites.[31] They called this new technology PageRank, where a website's relevance was determined by the number of pages, and the importance of those pages, that linked back to the original site.[32][33]
A small search engine called "RankDex" from IDD Information Services designed by Robin Li was, since 1996, already exploring a similar strategy for site-scoring and page ranking.[34] The technology in RankDex would be patented[35] and used later when Li founded Baidu in China.[36][37]
Page and Brin originally nicknamed their new search engine "BackRub", because the system checked backlinks to estimate the importance of a site.[38][39][40]
Eventually, they changed the name to Google, originating from a misspelling of the word "googol",[41][42] the number one followed by one hundred zeros, which was picked to signify that the search engine wants to provide large quantities of information for people.[43] Originally, Google ran under the Stanford University website, with the domain google.stanford.edu.[44]
The domain name for Google was registered on September 15, 1997,[45] and the company was incorporated on September 4, 1998. It was based in a friend's (Susan Wojcicki[30]) garage in Menlo Park, California. Craig Silverstein, a fellow PhD student at Stanford, was hired as the first employee.[30][46][47]
In May 2011, unique visitors of Google surpassed 1 billion mark for the first time, an 8.4 percent increase from a year ago with 931 million unique visitors.[48]
</p>
</div>
</div>
</div>
</body>
</html>
注：在设置body样式的时候，同时也要设置html的样式，因为在ie7中，它俩的页面范围是不一样的。
可以参考：http://nicescroll.areaaperta.com/
nicescroll的兼容性非常强，基本上所有的浏览器都可以使用，但是这么完美的插件还是存在它不足的地方。
在ie8上，偶尔会出现这样的情况：
页面会随着鼠标箭头的移动而滚动。根据我的个人经验，当你用鼠标按着滚动条上下滑动3s时会出现上述情况，当你再次用鼠标按着滚动条3s不动时，该现象会消失，这是为什么呢？
个人认为，该滚动条是设置在body或html上时会出现这种情况，如果在html内部，存在小范围的滚动条就没有这种情况了。所以，解决在ie8(及以下浏览器)中出现的这种问题，就是隐藏存在于body或html上的滚动条，在body下新增一个div标签，将滚动条添加在该div标签上。
Html代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery NiceScroll plugins</title>
<script src="http://cdn.staticfile.org/jquery/1.9.0/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/nicescroll/3.5.4/jquery.nicescroll.min.js"></script>
<style type="text/css">
html,body{overflow-x:hidden;overflow-y:hidden;width:100%;height:100%;margin:0px;padding:0px;}
.txtblock{width:600px;height:200px;margin:10px auto;padding:0px;z-index:9999;}
</style>
<script>
$(document).ready(function() {
$(".txtblock").niceScroll({styler:"fb",cursorcolor:"#000",cursorborderradius:"5px"});
$("#divexample2").niceScroll("#wrapperexample2",{cursorcolor:"#0F0",boxzoom:true});
});
</script>
</head>
<body>
<div class="txtblock">
<h1>Scrollable div (with wrapper div), custom color and zoom feature</h1>
<p>You can call zoom-in/zoom-out with double click on div or click on the upper icon (or use pitch gesture on ipad). When you use wrapper, Nicescroll try to enable hardware accelerated scrolling.</p>
<div id="divexample2" style="overflow: auto; position: relative; outline: none;height:150px; width:400px;">
<div id="wrapperexample2" >
<p>Google began in January 1996 as a research project by Larry Page and Sergey Brin when they were both PhD students at Stanford University in California.[30]
While conventional search engines ranked results by counting how many times the search terms appeared on the page, the two theorized about a better system that analyzed the relationships between websites.[31] They called this new technology PageRank, where a website's relevance was determined by the number of pages, and the importance of those pages, that linked back to the original site.[32][33]
A small search engine called "RankDex" from IDD Information Services designed by Robin Li was, since 1996, already exploring a similar strategy for site-scoring and page ranking.[34] The technology in RankDex would be patented[35] and used later when Li founded Baidu in China.[36][37]
Page and Brin originally nicknamed their new search engine "BackRub", because the system checked backlinks to estimate the importance of a site.[38][39][40]
Eventually, they changed the name to Google, originating from a misspelling of the word "googol",[41][42] the number one followed by one hundred zeros, which was picked to signify that the search engine wants to provide large quantities of information for people.[43] Originally, Google ran under the Stanford University website, with the domain google.stanford.edu.[44]
The domain name for Google was registered on September 15, 1997,[45] and the company was incorporated on September 4, 1998. It was based in a friend's (Susan Wojcicki[30]) garage in Menlo Park, California. Craig Silverstein, a fellow PhD student at Stanford, was hired as the first employee.[30][46][47]
In May 2011, unique visitors of Google surpassed 1 billion mark for the first time, an 8.4 percent increase from a year ago with 931 million unique visitors.[48]
</p>
</div>
</div>
</div>
</body>
</html>
注：在设置body样式的时候，同时也要设置html的样式，因为在ie7中，它俩的页面范围是不一样的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
