`

如何解决Jquery插件nicescroll在ie8中出现的滚动问题

阅读更多

jquery.nicescroll.js是jquery的开源插件,使用也非常简单,如何使用网上已讲的非常详细了,不会的

可以参考:http://nicescroll.areaaperta.com/

nicescroll的兼容性非常强,基本上所有的浏览器都可以使用,但是这么完美的插件还是存在它不足的地方。

在ie8上,偶尔会出现这样的情况:

页面会随着鼠标箭头的移动而滚动。根据我的个人经验,当你用鼠标按着滚动条上下滑动3s时会出现上述情况,当你再次用鼠标按着滚动条3s不动时,该现象会消失,这是为什么呢?

个人认为,该滚动条是设置在body或html上时会出现这种情况,如果在html内部,存在小范围的滚动条就没有这种情况了。所以,解决在ie8(及以下浏览器)中出现的这种问题,就是隐藏存在于body或html上的滚动条,在body下新增一个div标签,将滚动条添加在该div标签上。

<!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中,它俩的页面范围是不一样的。

分享到:
评论

相关推荐

    jquery.nicescroll完美滚动条使用方法

    一款非常完美的滚动条,简称nicescroll...只要依次引入jquery库以及jquery.nicescroll插件,然后将需要滚动部分外部的id或者class号替换为 lanrenzhijia即可,其中滚动条的颜色以及宽度均在js中可以控制,效果简单易用

    jquery.nicescroll兼容IE6-10,符合w3c标准浏览器,智能终端的滚动条

    **jQuery.nicescroll** 是一个JavaScript插件,主要用于在网页中提供美观且高度自定义的滚动条效果。它不仅在视觉上提升了用户体验,而且在功能上提供了与原生滚动条相似甚至更多的操作选项。该插件的核心优势在于其...

    jquery.nicescroll仿IOS滚动条美化插件.zip

    这款插件兼容多种浏览器,包括Chrome、Firefox、Safari、IE8+等,适用于桌面端和移动端项目,尤其在移动设备上,可以模拟出iOS的滚动体验,使得滚动更加流畅自然。 二、核心特性 1. 自定义样式:jQuery.nicescroll...

    jQuery.nicescroll美化滚动条

    jQuery.nicescroll插件的出现,正是为了赋予滚动条新的生命,使其成为网页设计中的亮点。 jQuery.nicescroll是一款强大的JavaScript库,它专门用于美化网页的滚动条,适用于浏览器的各个角落,包括页面、iframe甚至...

    jQuery仿IOS滚动插件Nicescroll3.zip

    为了在非iOS平台上实现类似的滚动效果,开发者们开发了各种插件,其中jQuery仿iOS滚动插件Nicescroll3便是其中的佼佼者。本文将详细介绍Nicescroll3的核心功能、工作原理以及如何在项目中应用。 一、Nicescroll3...

    jquery滚动条美化插件

    总的来说,jQuery.nicescroll插件是一个强大且易用的解决方案,它为网页设计师和开发者提供了美化滚动条的便利,让滚动条成为网站设计中的一道亮丽风景线。通过灵活的配置和丰富的API,你可以创造出符合自己项目需求...

    jQuery美化滚动条

    jQuery.nicescroll插件正是为了解决这一问题而诞生的,它提供了一种简单有效的方法来美化浏览器的默认滚动条,使其与网站整体设计风格更加融合,提升用户的浏览体验。 **jQuery.nicescroll插件介绍** jQuery....

    jQuery中Nicescroll滚动条插件的用法

    Nicescroll是一个基于jQuery的滚动条插件,它提供了一个美观且功能丰富的自定义滚动条解决方案。该插件几乎支持所有主流浏览器,包括IE6+,并能适用于触摸屏设备,具有很低的侵入性和高兼容性。利用Nicescroll,...

    jquery.nicescroll无滚动条左右拖拽特效代码

    jQuery.nicescroll插件,正如其名,旨在提供一种优雅的、自定义的滚动条解决方案,它允许开发者去掉传统的浏览器滚动条,取而代之的是更加美观、可定制的滚动效果,特别是左右拖拽的特效,为用户带来更加流畅的操作...

    前端项目-jquery.nicescroll.zip

    前端项目-jquery.nicescroll,nicescroll是一个jquery插件,适用于具有非常类似iOS/mobile风格的定制滚动条。它支持divs、iframes和document page(body)滚动条。兼容Firefox 4 、Chrome 5 、Safari 4 (Win/Mac)、...

    jQuery niceScroll滚动条错位问题的解决方法

    这个问题通常表现为滚动条没有正确地定位在目标元素的边缘,而是悬浮在页面的其他位置,特别是在IE浏览器中更为明显。 滚动条错位的根本原因在于niceScroll插件在某些情况下将滚动条放置在了body元素的末尾,而不是...

    meteor-jquery-nicescroll:感谢犬夜叉。 Nicescroll 是一个 jquery 插件,用于具有非常相似的 iosmobile 风格的漂亮的可定制滚动条。 它支持 DIV、IFrame 和文档页面(正文)滚动条。 兼容 Firefox 4+、Chrome 5+、Safari 4+ (winmac)、Opera 10+、IE 6+(所有 A 级浏览器)。 与 iOS 设备兼容,如 iPad、Android、黑莓、Windows Phone 以及许多移动和触摸设备

    Nicescroll 是一个 jquery 插件,用于具有非常相似的 ios/移动样式的漂亮的可定制滚动条。 它支持 DIV、IFrame 和文档页面(正文)滚动条。 兼容 Firefox 4+、Chrome 5+、Safari 4+ (win/mac)、Opera 10+、IE 6+...

    各种jquery自定义滚动条

    对于其他浏览器,如Firefox、IE等,我们需要借助jQuery插件来实现。这些插件通常通过监听滚动事件,然后使用CSS或者HTML元素模拟出滚动条的效果,从而实现跨浏览器的兼容性。 1. **jScrollPane**:jScrollPane是一...

    layout-jquery.nicescroll-3.6.0:从 https 复制

    jQuery NiceScroll 3.6.0是一款流行的JavaScript插件,它为网页滚动提供了更为优雅、自定义化的解决方案。本文将深入探讨这个插件的特性、安装以及在HTTPS环境下的应用。 一、jQuery NiceScroll简介 jQuery ...

    nicescroll

    nicescroll 滚动条插件是一个非常强大的基于 jQuery 的滚动条插件,不需要增加额外的css,几乎全浏览器兼容。ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触摸屏上使用。

    bootstrap-portal-website:引导主题

    jQuery Nicescroll是一个jQuery插件,用于创建平滑滚动效果,提升网页浏览体验: 1. **美观的滚动条**:它替换默认的浏览器滚动条,提供更现代、美观的外观。 2. **触摸设备支持**:Nicescroll支持触摸设备的滑动...

Global site tag (gtag.js) - Google Analytics