css滚动条样式如何兼容IE以及火狐浏览器的示例-css教程-PHP中文网

首页

web前端

css教程

css滚动条样式如何兼容IE以及火狐浏览器的示例

黄舟

Jul 21, 2017 pm 02:29 PM

firefox webkit

css滚动条样式如何兼容IE以及火狐浏览器的示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片与JavaScript配合做出个性滚动条</title>
<style type="text/css">
* { margin:0; padding:0; }
body { margin:20px 0 400px 20px; font:12px Arial; }
h1 { font-size:14px; }
ol { margin:20px; line-height:160%; }
#out {
 position:relative;
 width:500px;
 height:300px;
 margin:100px 0 100px 80px;
 border:1px solid #369;
 overflow:hidden;
}
#content {
 width:520px;
 height:100%;
 overflow:auto;
 -moz-user-select:none;
}
#scrollBar,#scrollBarHandle,.scroll_bar_top,.scroll_bar_top_a,.scroll_bar_bottom,.scroll_bar_bottom_a {
 background-image:url(http://www.codefans.net/jscss/demoimg/200910/un_bg_scrollBar.gif);
}
#scrollBar {
 position:absolute;
 top:0;
 right:0;
 z-index:9;
 width:14px;
 height:100%;
 background-repeat:repeat-y;
 background-position:-42px 0;
 float:left;
}
#scrollBarTop,#scrollBarHandle,#scrollBarBottom {
 position:absolute;
 left:0;
 cursor:default;
}
#scrollBarTop,#scrollBarBottom {
 width:100%;
 height:14px;
 color:#fff;
 text-align:center;
}
#scrollBarTop { top:0; }
#scrollBarBottom { bottom:0; }
#scrollBarHandle { width:100%; background-repeat:repeat-y; background-position:-28px 0; }
.scroll_bar_top { background-position:0 0; }
.scroll_bar_top_a { background-position:-14px 0; }
.scroll_bar_bottom { background-position:-56px 0; }
.scroll_bar_bottom_a { background-position:-70px 0; }
</style>
</head>
<body>
<div id="out">
  <div id="content">
    fsdfs<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111
    <br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111
    <br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111
    <br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111
    <br />fsdfs<br />11111111<br />fsdfs<br />fsdfs<br />11111111<br />fsdfs
    <br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs
    <br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs
    <br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs
    <br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs
    <br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111
    <br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111
    <br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111
    <br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111
    <br />fsdfs<br />
  </div>
  <div id="scrollBar">
   <div id="scrollBarTop" class="scroll_bar_top"></div>
    <div id="scrollBarHandle"></div>
    <div id="scrollBarBottom" class="scroll_bar_bottom"></div>
  </div>
</div>
<script>
var ximen = {
 $:function(o){ return document.getElementByIdx_x(o); },
 getStyle:function(o) { return o.currentStyle||document.defaultView.getComputedStyle(o,null); },
 getOffset:function(o) {
  var t = o.offsetTop,h = o.offsetHeight;
  while(o = o.offsetParent) { t += o.offsetTop; }
  return { top:t, height:h };
 },
 bind:function(o,eType,fn) {
  if(o.addEventListener) { o.addEventListener(eType,fn,false); }
  else if(o.attachEvent) { o.attachEvent("on" + eType,fn); }
  else { o["on" + eType] = fn; }
 },
 unbind:function(o,eType,fn) {
  if(o.removeEventListener) { o.removeEventListener(eType,fn,false); }
  else if(o.detachEvent) { o.detachEvent("on" + eType,fn); }
  else { o["on" + eType] = fn; }
 },
 stopPropagate:function(e) {
  if(e && e.stopPropagation) { e.stopPropagation(); }
  else { window.event.cancelBubble = true; }
  return false;
 },
 stopDefault:function(e) {
  e = e || window.event;
  e.stopPropagation && (e.preventDefault(),e.stopPropagation()) || (e.cancelBubble = true,e.returnValue = false);
 }
};
(function(){
 var myScrollDown,myScrollUp,scrollBarMouseDown,scrollBarMouseUp,relY,
  out = ximen.$("out"),
  content = ximen.$("content"),
  scrollBar = ximen.$("scrollBar"),
  scrollBarTop = ximen.$("scrollBarTop"),
  scrollBarHandle = ximen.$("scrollBarHandle"),
  scrollBarBottom = ximen.$("scrollBarBottom"),
  scrollBarUpHeight = parseInt(ximen.getStyle(scrollBarTop).height),
  scrollBarBottomHeight = parseInt(ximen.getStyle(scrollBarBottom).height),
  contentScrollHeight = content.scrollHeight,//将content.scrollHeight赋一次值,解决IE6下scrollHeight需调用两次的bug
  scrollBarHandleHeight = parseInt(content.offsetHeight/content.scrollHeight * (scrollBar.offsetHeight - scrollBarUpHeight - scrollBarBottomHeight)),
  setScrollBarHandle = function() {//当内容超多时设置拖拽条子的最小高度
   scrollBarHandle.style.top = scrollBarUpHeight + "px";
   if(scrollBarHandleHeight > 15) { scrollBarHandle.style.height = scrollBarHandleHeight + "px"; }
   else { scrollBarHandleHeight = 15; scrollBarHandle.style.height = "15px"; }
  },
  clearAllInterval = function() { clearInterval(myScrollDown); clearInterval(myScrollUp); clearInterval(scrollBarMouseDown); },
  forMousemove = function(e) {
   var e = e || window.event;
   content.scrollTop = (e.clientY - relY - scrollBarUpHeight)/(scrollBar.offsetHeight - scrollBarHandleHeight - scrollBarUpHeight - scrollBarBottomHeight)*(content.scrollHeight - content.offsetHeight);
  },
  forMouseDown = function(event){
   var et = event.target || event.srcElement;
   relY = event.clientY - et.offsetTop;
   ximen.bind(document,"mousemove",forMousemove);
  },
  scrollDir = function(e) {
   var e = e || window.event,eDir;     //设置滚轮事件,e.wheelDelta与e.detail分别兼容IE、W3C，根据返回值的正负来判断滚动方向
   if(e.wheelDelta) { eDir = e.wheelDelta/120; }
   else if(e.detail) { eDir = -e.detail/3; }
   if(eDir > 0) { content.scrollTop -= 80; } //步长设80像素a比较接近window滚动条的滚动速度
   else { content.scrollTop += 80; }
   ximen.stopDefault(e);
  },
  scrollBarClick = function(e) {
   var e = e || window.event,
    mStep = scrollBar.offsetHeight,
    documentScrollTop = document.documentElement.scrollTop,
    hOffset = ximen.getOffset(scrollBarHandle);
   if(documentScrollTop + e.clientY < hOffset.top) { scrollBarMouseDown = setInterval(function(){ content.scrollTop -= 15; },10); }
   else if(documentScrollTop + e.clientY > hOffset.top + hOffset.height) { scrollBarMouseDown = setInterval(function(){ content.scrollTop += 15; },10); }
  };
 setScrollBarHandle();
 ximen.bind(content,"scroll",function(){
  scrollBarHandle.style.top = content.scrollTop/(content.scrollHeight - content.offsetHeight) * (scrollBar.offsetHeight - scrollBarHandleHeight - scrollBarUpHeight - scrollBarBottomHeight) + scrollBarUpHeight + "px";
 });
 ximen.bind(scrollBarBottom,"mousedown",function(){ myScrollDown = setInterval(function(){ content.scrollTop += 15; },10); });
 ximen.bind(scrollBarTop,"mousedown",function(){ myScrollUp = setInterval(function(){ content.scrollTop -= 15; },10); });
 ximen.bind(scrollBarBottom,"mouseup",clearAllInterval);
 ximen.bind(scrollBarBottom,"mouseout",clearAllInterval);
 ximen.bind(scrollBarTop,"mouseup",clearAllInterval);
 ximen.bind(scrollBarTop,"mouseout",clearAllInterval);
 ximen.bind(scrollBarHandle,"mousedown",forMouseDown);
 ximen.bind(document,"mouseup",function(){
  ximen.unbind(document,"mousemove",forMousemove);
  ximen.unbind(scrollBarHandle,"mousemove",forMousemove);
 });
 ximen.bind(out,"selectstart",function(){ return false; });
 ximen.bind(out,"select",function(){ document.selection.empty(); });
 ximen.bind(out,"mousewheel",scrollDir);
 ximen.bind(out,"DOMMouseScroll",scrollDir);
 ximen.bind(scrollBar,"mousedown",scrollBarClick);
 ximen.bind(scrollBar,"mouseup",clearAllInterval);
 ximen.bind(scrollBarTop,"click",function(event){ ximen.stopPropagate(event); });
 ximen.bind(scrollBarTop,"mousedown",function(){ scrollBarTop.className = "scroll_bar_top_a"; });
 ximen.bind(scrollBarTop,"mouseup",function(){ scrollBarTop.className = "scroll_bar_top"; });
 ximen.bind(scrollBarTop,"mouseout",function(){ scrollBarTop.className = "scroll_bar_top"; });
 ximen.bind(scrollBarBottom,"click",function(event){ ximen.stopPropagate(event); });
 ximen.bind(scrollBarBottom,"mousedown",function(){ scrollBarBottom.className = "scroll_bar_bottom_a"; });
 ximen.bind(scrollBarBottom,"mouseup",function(){ scrollBarBottom.className = "scroll_bar_bottom"; });
 ximen.bind(scrollBarBottom,"mouseout",function(){ scrollBarBottom.className = "scroll_bar_bottom"; });
})();
</script>
</body>
</html>

登录后复制

以上是css滚动条样式如何兼容IE以及火狐浏览器的示例的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7530

CakePHP 教程

1379

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

Ubuntu Linux中如何删除Firefox Snap？ Feb 21, 2024 pm 07:00 PM

要在UbuntuLinux中删除FirefoxSnap，可以按照以下步骤进行操作：打开终端并以管理员身份登录到Ubuntu系统。运行以下命令以卸载FirefoxSnap：sudosnapremovefirefox系统将提示你输入管理员密码。输入密码并按下Enter键以确认。等待命令执行完成。一旦完成，FirefoxSnap将被完全删除。请注意，这将删除通过Snap包管理器安装的Firefox版本。如果你通过其他方式（如APT包管理器）安装了另一个版本的Firefox，则不会受到影响。通过以上步骤

mozilla firefox可以卸载吗 Mar 15, 2023 pm 04:40 PM

mozilla firefox可以卸载；firefox属于第三方浏览器，如果不需要，完全可以卸载。卸载方法：1、在开始菜单中，依次点击“Windwos系统”-“控制面板”；2、在“控制面板”界面中，点击“程序和功能”；3、在新界面中，找到并双击火狐浏览器图标；4、在卸载弹窗中，点击“下一步”；5、点击“卸载”即可。

火狐浏览器Firefox 113 新特性：支持AV1动图、增强密码生成器和画中画特性 Mar 05, 2024 pm 05:20 PM

近日消息，Mozilla在发布Firefox112稳定版的同时，也宣布下个主要版本Firefox113进入Beta频道，支持AV1动图、增强密码生成器和画中画特性。火狐浏览器Firefox113主要新功能/新特性如下支持AV1格式动图(AVIS)通过引入特殊字符来增强密码生成器的安全性增强画中画功能，支持后退、显示视频时间，能更轻松地启用全屏模式为Debian和Ubuntu发行版提供官方DEB安装文件更新书签导入功能，默认情况下支持导入书签的图标在支持的硬件上默认启用硬件加速AV1视频解码使用w

Scrapy中如何使用Mozilla Firefox来解决扫码登录的问题？ Jun 22, 2023 pm 09:50 PM

对于爬虫爬取需要登录的网站，验证码或扫码登录是一个很困扰的问题。Scrapy是Python中一个非常好用的爬虫框架，但是在处理验证码或扫码登录时，需要采取一些特殊的措施。作为一个常见的浏览器，MozillaFirefox提供了一种解决方案，可以帮助我们解决这个问题。Scrapy的核心模块是twisted，它只支持异步请求，但是一些网站需要使用cookie和

Apple 发布更新以修复 MacBook 中的 WebKit 漏洞和过度耗电 Apr 15, 2023 am 10:49 AM

Apple已发布适用于iPhone、iPad、Mac和AppleWatch的更新。尽管每个设备的更新都很小，但它们解决了WebKit漏洞。该公司还保证已经修复了一个错误，该错误会导致MacBook笔记本电脑意外耗尽电池。AppleiOS和iPadOS15.3.1是次要更新。它实际上不包含任何主要功能。但是，它对使用盲文显示器的人很有用。此外，该更新还解决了任意代码执行漏洞。iOS15.3.1的更新说明提到：iOS15.3.1为您的iPhone提供了重要的安全更新，并修

Ubuntu 23.10默认将在原生 Wayland 模式下运行火狐浏览器 Firefox Feb 29, 2024 am 10:10 AM

Canonical公司近日宣布，在即将发布的Ubuntu23.10中，FirefoxSnap已配置默认在Wayland模式下运行。注：Ubuntu目前已经默认Wayland会话，Firefox也能正常工作。不过当前FirefoxSnap实际上是以XWayland兼容模式下运行，而不是严苛的原生Wayland模式。Canonical宣布默认会在Wayland模式下运行Firefox浏览器，从而在HiDPI显示器不会出现界面模糊、缩放失真等问题，并且支持拖动、手势捏合等触控手势。如上所述，Ubunt

火狐浏览器Firefox 115发布，支持Win7/Win8.1的最后一个版本 Mar 04, 2024 pm 04:46 PM

今日最新消息，Mozilla今天正式发布了火狐浏览器Firefox115稳定版更新，本次更新最值得关注一点是，这是支持Win7/Win8、macOS10.12、10.13和10.14的最后一个版本。下载地址：https://ftp.mozilla.org/pub/firefox/releases/115.0/Mozilla在官方更新日志中表示：微软于2023年1月结束了对Win7和Win8系统的支持，而今天发布的Firefox115版本是上述系统用户收到的最后一个版本更新。Win7和Win8用户

欧洲允许苹果放松浏览器限制：可选择非 WebKit 引擎，Chrome 可作为默认浏览器 Jan 26, 2024 am 10:42 AM

1月26日消息，欧洲地区的iPhone用户升级iOS17.4Beta1更新之后，打开Safari浏览器之后会看到新窗口，支持更换默认浏览器。欧洲地区用户可以根据自己的偏好，设置包括Firefox、Opera、Chrome、Brave和MicrosoftEdge等非Safari浏览器了。浏览器应用现在也可以使用WebKit以外的浏览器引擎，包括浏览器应用和应用内的浏览体验。苹果此前要求包括Chrome浏览器和火狐浏览器等常用浏览器在内，iOS上的所有浏览器都必须使用WebKit引擎，今后Chrom

See all articles

css滚动条样式如何兼容IE以及火狐浏览器的示例

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题