Web Front-end
CSS Tutorial
Example of how css scroll bar style is compatible with IE and Firefox
Example of how css scroll bar style is compatible with IE and Firefox
Examples of how css scroll bar styles are compatible with IE and Firefox browsers
<!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>The above is the detailed content of Example of how css scroll bar style is compatible with IE and Firefox. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1378
52
How to remove Firefox Snap in Ubuntu Linux?
Feb 21, 2024 pm 07:00 PM
To remove FirefoxSnap in Ubuntu Linux, you can follow these steps: Open a terminal and log in to your Ubuntu system as administrator. Run the following command to uninstall FirefoxSnap: sudosnapremovefirefox You will be prompted for your administrator password. Enter your password and press Enter to confirm. Wait for command execution to complete. Once completed, FirefoxSnap will be completely removed. Note that this will remove versions of Firefox installed via the Snap package manager. If you installed another version of Firefox through other means (such as the APT package manager), you will not be affected. Go through the above steps
Can mozilla firefox be uninstalled?
Mar 15, 2023 pm 04:40 PM
Mozilla Firefox can be uninstalled; Firefox is a third-party browser and can be uninstalled if it is not needed. Uninstallation method: 1. In the Start menu, click "Windwos System" - "Control Panel"; 2. In the "Control Panel" interface, click "Programs and Features"; 3. In the new interface, find and double-click Firefox Browser icon; 4. In the uninstall pop-up window, click "Next"; 5. Click "Uninstall".
Firefox 113 new features: support for AV1 animations, enhanced password generator and picture-in-picture features
Mar 05, 2024 pm 05:20 PM
According to recent news, while Mozilla released the stable version of Firefox 112, it also announced that the next major version, Firefox 113, has entered the Beta channel and supports AV1 animations, enhanced password generator and picture-in-picture features. The main new functions/features of Firefox 113 are as follows: Support for AV1 format animated images (AVIS); Enhance the security of the password generator by introducing special characters; Enhance the picture-in-picture function, support rewind, display video time, and enable full screen more easily Mode provides official DEB installation files for Debian and Ubuntu distributions. Updated bookmark import feature, icons for imported bookmarks are supported by default. Hardware accelerated AV1 video decoding is enabled by default on supported hardware using w
How to use Mozilla Firefox in Scrapy to solve the problem of scanning QR code to log in?
Jun 22, 2023 pm 09:50 PM
For crawlers to crawl websites that require login, verification code or scan code login is a very troublesome problem. Scrapy is a very easy-to-use crawler framework in Python, but when processing verification codes or scanning QR codes to log in, some special measures need to be taken. As a common browser, Mozilla Firefox provides a solution that can help us solve this problem. The core module of Scrapy is twisted, which only supports asynchronous requests, but some websites require the use of cookies and
Apple releases update to fix WebKit vulnerability and excessive power consumption in MacBook
Apr 15, 2023 am 10:49 AM
Apple has released updates for iPhone, iPad, Mac and Apple Watch. Although the updates for each device are small, they address WebKit vulnerabilities. The company also assured that it has fixed a bug that caused MacBook laptops to unexpectedly drain their batteries. Apple iOS and iPadOS 15.3.1 are minor updates. It doesn't actually contain any major features. However, it is useful for people using braille displays. Additionally, the update resolves an arbitrary code execution vulnerability. The update notes for iOS 15.3.1 mention: iOS 15.3.1 provides important security updates for your iPhone and fixes
Ubuntu 23.10 will run Firefox in native Wayland mode by default
Feb 29, 2024 am 10:10 AM
Canonical recently announced that in the upcoming Ubuntu 23.10, Firefox Snap has been configured to run in Wayland mode by default. Note: Ubuntu currently has the Wayland session by default, and Firefox can also work normally. However, currently FirefoxSnap actually runs in XWayland compatibility mode, rather than the strict native Wayland mode. Canonical announced that it will run the Firefox browser in Wayland mode by default, so that problems such as interface blur and scaling distortion will not occur on HiDPI displays, and it will support touch gestures such as dragging and pinching. As mentioned above, Ubunt
Firefox browser Firefox 115 released, supports the last version of Win7/Win8.1
Mar 04, 2024 pm 04:46 PM
Today’s latest news, Mozilla officially released the Firefox 115 stable version update today. The most noteworthy thing about this update is that this is the last version that supports Win7/Win8, macOS10.12, 10.13 and 10.14. Download address: https://ftp.mozilla.org/pub/firefox/releases/115.0/Mozilla stated in the official update log: Microsoft will end support for Win7 and Win8 systems in January 2023, and Firefox 115 released today The version is the last version update received by users of said system. Win7 and Win8 users
Europe allows Apple to relax browser restrictions: Non-WebKit engines can be selected, Chrome can be used as the default browser
Jan 26, 2024 am 10:42 AM
According to news on January 26, after iPhone users in Europe upgrade to the iOS17.4Beta1 update, they will see a new window after opening the Safari browser, which supports changing the default browser. Users in Europe can set up non-Safari browsers including Firefox, Opera, Chrome, Brave and Microsoft Edge according to their own preferences. Browser apps can now also use browser engines other than WebKit, including browser apps and in-app browsing experiences. Apple previously required that all browsers on iOS, including common browsers such as Chrome and Firefox, must use the WebKit engine.
