Use styles to control the scroll bar in IE5.5 browser

zhaozj2021-02-08 227

Since DHTML has emerged, Microsoft has not stopped from the DHTML function. It has added many new style sheet content in Microsoft's latest visitors Internet Explorer 5.5, which modifies the pattern of scroll bars. Below we simply introduce the style sheet content involving the browser scroll bar:

1. Settings when overflow content overflow

Overflow-x horizontal direction setting When the content is overflow

Overflow-Y vertical setting setting When content overflows

The above three attributes are set for Visible (default), Scroll, Hidden, AUTO.

2. Scrollbar-3D-light-color stereo scroll strip of color

Scrollbar-arrow-color upper button colors on the triangle arrow

Scrollbar-base-color scroll bar's basic colors

Scrollbar-dry-shadow-color stereo scroll stroke color shadow color

Scrollbar-face-color stereo colors

Scrollbar-highlight-color scroll bar blank part

Scrollbar-shadow-color stereo scroll strip shadow color

The values set above the seven attributes are color values, and various expressions defined by style sheets can be used.

Using the above style definition content, we can specify the browser window, the display or color style of the scroll bar of the multi-line text box, the first set of style properties is used to set whether the setting object is displayed, the second group Styles properties are used to set the color of the scroll bar. The style properties involved in this paper are IE to support, and the style attribute of the second group can only support IE5.5, so please pay attention when debugging.

We use several examples to explain the above style properties:

1. Let the browser window never have a scroll bar

No horizontal scroll bar

No vertical scroll bar

No scroll bar

2. Set the scroll bar of multi-line text boxes

No horizontal scroll bar

</ textarea></p> <p>No vertical scroll bar</p> <p><textarea style = "overflow-y: hidden"> </ textarea></p> <p>No scroll bar</p> <p><textarea style = "overflow-x: hidden; overflow-y: hidden"> </ textarea></p> <p>Or <textarea style = "overflow: hidden"> </ textarea></p> <p>3. Set the color of the window scroll bar</p> <p>Set the color of the window scroll bar to red <body style = "scrollbar-base-color: red"></p> <p>Scrollbar-base-color sets basic colors, in general, only need to set this property, you can change the purpose of changing the scroll bar color.</p> <p>Plus a special effect:</p> <p><body style = "scrollbar-arrow-color: Yellow; scrollbar-base-color: lightsalmon"></p> <p>4. When setting other elements, basically, you'd better define a class in the style sheet file so you can reuse.</p> <p>.coolscrollbar</p> <p>{</p> <p>Scrollbar-arrow-color: yellow;</p> <p>ScrollBar-Base-Color: Lightsalmon;</p> <p>}</p> <p>Add the above statement to the style table file or in the <style> </ style> of the HTML header, then use</p> <p><textarea class = "coolscrollbar"> </ textarea></p> <p>Action quickly, let your home page cool.</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-2064.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="2064" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.041</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'yIYtaDBSTQ3gq0pPMbiwPAkNfOx5Unz0YggDWZbN60hYmvh31sstypG89BoS0d1dJB6yDpO9hNJ9FcRoqoFITA_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>