Removal and retention of iframe scroll bars in JavaScript

In development, we often encounter the problem of removing all scroll bars, removing the right scroll bar and retaining the bottom scroll bar, removing the bottom scroll bar and retaining the right scroll bar. How do you achieve this based on js? This article will introduce to you how to remove and retain iframe scroll bars in JavaScript. Let’s take a look!

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

1: Remove all scroll bars

The first method: iframe has a scrolling attribute, which has three values: auto, yes, and no.​​​​           scrolling: no -------Always hide the scroll bar

When scrolling: no is set, all scroll bars are gone.

                                                                                                                       In addition to scrolling Can remove all scroll bars, there is another method, set body{overflow: hidden} in the embedded page, so that the scroll bars can also be removed, and this is also the case We only want to remove the properties used by a certain scroll bar.

2: Remove the scroll bar on the right and keep the scroll bar at the bottom

If you only want to keep the scroll bar at the bottom, you can set body in the embedded page {overflow-x: auto; overflow-y: hidden;}

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

Set body{overflow-x: hidden; overflow-y: auto;} in the embedded page

We already know that both of these attributes can be set The display and hiding of scroll bars, so when both are set at the same time, which effect will occur?

Through detection, I found that when scrolling = " auto " or " yes ", if the body is set, the settings in the body will be used; when scrolling = " no ", no matter what the body is set, scrolling will be used settings, that is, all scroll bars have been removed.