In development, we often encounter 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 it based on js? Next, through this article, I will introduce to you the implementation methods of removing and retaining iframe scroll bars in JavaScript. Let’s take a look together!
After 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 scroll bar on the bottom, remove the scroll bar on the bottom and keep the scroll bar on the right. So what should we do?
1: Remove all scroll bars
The first method: The iframe has a scrolling property, which has three values: auto , yes , no.
scrolling : auto ------Scrolling bar appears when needed
scrolling : yes ------ Always display scrollbars
scrolling : no -------Always hide scrollbars
When setting scrolling : no, all scroll bars are gone.
The second method: I found that in addition to scrolling, there is another method, setting body{overflow: hidden} in the embedded page, so that the scrollbar can also be removed, and this is also when we only want to remove the attributes used by a certain scrollbar.
2: Remove the scroll bar on the right and keep the scroll bar on the bottom
If you only want to keep the scrollbar below, you can set body{overflow-x:auto; overflow-y:hidden;}
Three: Remove the scroll bar below and keep the scroll bar on the right
Set body{overflow-x:hidden; overflow-y:auto;}
We already know that both properties can set the display and hiding of scroll bars. So when the two are set at the same time, which effect will appear?
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, no matter what the body is set, the settings of scrolling will be used, that is, all scroll bars are removed.
The above is the full description of the removal and retention of iframe scroll bars in JavaScript introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time!