Techniques for removing and retaining _javascript in JavaScript about IFRAME scroll bars

Source: Internet
Author: User

In the development of often encountered to remove all of the scroll bar, remove the right scroll bar and retain the bottom of the scroll bar, remove the bottom of the scroll bar and keep the right scroll bar, we are based on how to achieve the JS? In this article, we introduce the implementation method of the removal and retention of the IFRAME scroll bar in JavaScript. Let's have a look!

When the IFRAME is embedded in the page, we sometimes need to adjust the scroll bar, for example, remove all the scroll bars, remove the scroll bar on the right and keep the bottom scroll bar, remove the scroll bar underneath and keep the scroll bar on the right. So what should we do?

One: Remove all the scroll bars

The first method: The IFRAME has a scrolling property, which has the three values of auto, yes, No.

Scrolling:auto-----Scroll bar appears when needed

Scrolling:yes------Always show scroll bars

Scrolling:no-------always hide scroll bars

When you set the Scrolling:no, all the scroll bars are gone.

The second method: I found that in addition to scrolling can remove all the scroll bar, there is another way, in the embedded page to set Body{overflow:hidden}, so you can also remove the scroll bar, and this is when we just want to remove a scroll bar to use the properties.

Two: Remove the scroll bar on the right and keep the scroll bar underneath

If you want to keep the scroll bar below, you can set Body{overflow-x:auto Overflow-y:hidden on the embedded page.

Three: Remove the bottom scroll bar and keep the scroll bar on the right

Set Body{overflow-x:hidden;overflow-y:auto on an embedded page;

We already know that both of these properties can be set to display and hide the scroll bar, so what happens when two are set simultaneously?

Through detection, I found that when scrolling = "Auto" or "yes", if set the body, then will use the body of the setting; when scrolling = "no", no matter what the body set, will use the scrolling Settings, that is, all of the scroll bars have been removed.

The above is a small set of JavaScript for you to introduce the details of the removal and retention of the IFRAME scroll bar, hope to help everyone, if you have any questions welcome to my message, small series will promptly reply to everyone!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.