<Body scroll = NO> remove horizontal scroll bar: <body style = "overflow-X: hidden"> remove vertical scroll bar: <body style = "overflow-Y: hidden "> hide the horizontal scroll bar and display the vertical scroll bar: <body style =" overflow-X: hidden; overflow-Y: scroll "> hide all <body style =" overflow: hidden "> or <body scroll =" no "> if it is a frame page, the preceding method cannot be used to remove it. Consider the following method: Add <style> HTML to the contained page { Overflow-x : Hidden ;} </Style> to hide a vertical scroll bar: <style> html { Overflow-y : Hidden ;}</Style> let's talk about the attributes of the scroll bar.Code: Overflow-Y: visible | auto | hidden | scroll visible: Do not cut the content or add a scroll bar. Auto: When necessary, cut the content and add the scroll bar hidden: Do not display content that exceeds the object height. This attribute is not described here. If you like it, you can try scroll: always display the vertical scroll bar. First, I will describe how to remove the scroll bar: if you use a Baidu style template, there may be only one scroll bar, that is, the biggest browser window on the right of the whole space to roll the dynamic bar, that is, the scroll bar I have beautified. Now we can remove this scroll bar, but it does not affect the browsing method: in the body {}You can add overflow-Y: visible, so that the scroll bar will not be displayed. You may ask, how can we pull it down? Haha, since I said it does not affect browsing, there is certainly a method. The browsing method is to use the scroll wheel of the mouse, although the scroll bar is gone, however, the scroll wheel can make the webpage scroll up or down. I believe that when you browse a webpage, the number of times the scroll wheel pulls down the webpage is more than the number of times the scroll bar is dragged with the mouse? Tip: If you have a friend who has no scroll bar and no scroll wheel, how can you browse the webpage? Oh, you can use Pageup and Pagedown at the top of the arrow keys on the keyboard to flip pages up and down, or use spaces to pull the webpage down and SHIFT + space to pull the webpage up, another method is to use the up and down arrow keys for pulling, and press the Home Key to return to the top of the page, and the end key to reach the bottom of the page. Is there a lot of methods? However, there will always be some inconvenience, so you can consider whether to cancel this scroll bar based on your own space and happiness. Haha, I can't think of it. After talking about so many things, let's talk about how to add a scroll bar: overflow-Y: auto; height: the number of PX auto is to automatically determine whether to add a scroll bar. When the set object content exceeds the height set by the height, the scroll bar is automatically added. Otherwise, it is not displayed. Body {} The default value is overflow-Y: auto; Height: browser height, so when the webpage content exceeds the browser height, the scroll bar will automatically appear on the right side of the browser. If you need to set this, I suggest setting it in the latest comment # m_comment {} ,ArticleList # m_blog {} Some friends cannot find the template IDs of these templates, such as # m_comment Div. item. {} Or # m_pro {}You can add the ID that you do not have. In this way, you can set another method to add the scroll bar: overflow-Y: Scroll, however, if you only add this parameter, the scroll bar will be displayed, but the scroll bar will not be displayed. Therefore, you must add a height: How many PX height attribute to keep up with the above method, however, there is a fundamental difference. No matter whether the height of the object content exceeds the height set by height, the scroll bar will always be displayed on the edge. Let's talk about the beautification of the scroll bar, my friend showed me a description on the Internet. I think the figure above is very good, but it is very small, so I doubled it and it looks much clearer, let's talk about the various attributes of beautification: SCROLLBAR-FACE-COLOR: color code; SCROLLBAR-HIGHLIGHT-COLOR: color code; SCROLLBAR-SHADOW-COLOR: color code; SC ROLLBAR-3DLIGHT-COLOR: color code; SCROLLBAR-ARROW-COLOR: color code; SCROLLBAR-TRACK-COLOR: color code; SCROLLBAR-DARKSHADOW-COLOR: color code; do you see so many properties have nodded big? Haha, don't worry. You will feel much better when you look at the illustration I just mentioned that has been doubled: The image here has a scrollbar-base-color attribute, in fact, this attribute is the sum of the above seven attributes. What should I do? After you set the color of this attribute, you do not need to set the first seven attributes. the scroll bar will automatically set for you, however, this setting will automatically set this attribute based on the color of your scrollbar-base-color. The advantage is that you do not have to study the color of each place with great effort, however, the disadvantage is that it cannot be integrated with colors .. NOTE: If scrollbar-base-color is set, do not set the other seven attributes. If the other seven attributes are set, do not set scrollbar-base-color. Otherwise, there may be conflicts, there will be some results that do not work at the end, or considering that you may like my beautification code [really bad ~~], I put my beautification code posted out: SCROLLBAR-FACE-COLOR: # ccffff; SCROLLBAR-HIGHLIGHT-COLOR: White; SCROLLBAR-SHADOW-COLOR: #813533; SCROLLBAR-3DLIGHT-COLOR: #813533; SCROLLBAR-ARROW-COLOR: #813533; SCROLLBAR-TRACK-COLOR: White; SCROLLBAR-DARKSHADOW-COLOR: #813533; The above code is added to the body{} In
[From] http://www.cnblogs.com/rocblog/archive/2013/05/17/3084694.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
