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工具

熱工具

熱門話題

Java教學

1666

CakePHP 教程

1425

Laravel 教程

1325

PHP教程

1272

C# 教程

1252

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

歐洲允許蘋果放鬆瀏覽器限制：可選擇非 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

火狐瀏覽器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用戶

See all articles

css捲軸樣式如何相容IE以及火狐瀏覽器的範例

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題