css捲軸樣式如何相容IE以及火狐瀏覽器的範例
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中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

要在UbuntuLinux中刪除FirefoxSnap,可以按照以下步驟進行操作:打開終端機並以管理員身份登入Ubuntu系統。執行以下命令以卸載FirefoxSnap:sudosnapremovefirefox系統將提示你輸入管理員密碼。輸入密碼並按下Enter鍵以確認。等待指令執行完成。一旦完成,FirefoxSnap將被完全刪除。請注意,這將刪除透過Snap套件管理器安裝的Firefox版本。如果你透過其他方式(如APT套件管理器)安裝了另一個版本的Firefox,則不會受到影響。透過上述步驟

mozilla firefox可以卸載;firefox屬於第三方瀏覽器,如果不需要,完全可以卸載。卸載方法:1、在開始功能表中,依序點選「Windwos系統」-「控制台」;2、在「控制台」介面中,點選「程式與功能」;3、在新介面中,找到並雙擊火狐瀏覽器圖示;4、在卸載彈窗中,點選「下一步」;5、點選「卸載」即可。

近日消息,Mozilla在發布Firefox112穩定版的同時,也宣布下個主要版本Firefox113進入Beta頻道,支援AV1動圖、增強密碼產生器和畫中畫特性。火狐瀏覽器Firefox113主要新功能/新特性如下支援AV1格式動圖(AVIS)透過引入特殊字元來增強密碼產生器的安全性增強畫中畫功能,支援後退、顯示影片時間,能更輕鬆地啟用全螢幕模式為Debian和Ubuntu發行版提供官方DEB安裝檔更新書籤導入功能,預設支援導入書籤的圖示在支援的硬體上預設啟用硬體加速AV1視訊解碼使用w

對於爬蟲爬取需要登入的網站,驗證碼或掃碼登入是一個很困擾的問題。 Scrapy是Python中一個非常好用的爬蟲框架,但在處理驗證碼或掃碼登入時,需要採取一些特殊的措施。作為一個常見的瀏覽器,MozillaFirefox提供了一個解決方案,可以幫助我們解決這個問題。 Scrapy的核心模組是twisted,它只支援非同步請求,但有些網站需要使用cookie和

Apple已發布適用於iPhone、iPad、Mac和AppleWatch的更新。儘管每個設備的更新都很小,但它們解決了WebKit漏洞。該公司還保證已經修復了一個錯誤,該錯誤會導致MacBook筆記型電腦意外耗盡電池。 AppleiOS和iPadOS15.3.1是次要更新。它實際上不包含任何主要功能。但是,它對使用點字顯示器的人很有用。此外,該更新還解決了任意程式碼執行漏洞。 iOS15.3.1的更新說明提到:iOS15.3.1為您的iPhone提供了重要的安全更新,並修

Canonical公司近日宣布,在即將發布的Ubuntu23.10中,FirefoxSnap已配置預設在Wayland模式下運作。註:Ubuntu目前已經預設Wayland會話,Firefox也能正常運作。不過目前FirefoxSnap其實是以XWayland相容模式下運行,而不是嚴苛的原生Wayland模式。 Canonical宣布預設會在Wayland模式下運行Firefox瀏覽器,從而在HiDPI顯示器不會出現介面模糊、縮放失真等問題,並且支援拖曳、手勢捏合等觸控手勢。如上所述,Ubunt

1月26日訊息,歐洲地區的iPhone用戶升級iOS17.4Beta1更新之後,打開Safari瀏覽器之後會看到新窗口,支援更換預設瀏覽器。歐洲地區用戶可以根據自己的偏好,設定包括Firefox、Opera、Chrome、Brave和MicrosoftEdge等非Safari瀏覽器了。瀏覽器應用程式現在也可以使用WebKit以外的瀏覽器引擎,包括瀏覽器應用程式和應用程式內的瀏覽體驗。蘋果先前要求包含Chrome瀏覽器和火狐瀏覽器等常用瀏覽器在內,iOS上的所有瀏覽器都必須使用WebKit引擎,今後Chrom

今日最新消息,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用戶
