The “window.open()” JavaScript method allows developers to link to another window inside their webpage. This window gets invoked when a specified action is performed by the user.

In short, the main functionality of the “window.open()” method is to open a new window over the main webpage without disturbing the main webpage interface. In some scenarios, the new window gets opened successfully but the scrollbar does not appear at all, which sends a bad impression to the users.

This quick guide elaborates the process to create a vertical scrollbar with a window.open() method in JavaScript.

How to Create Vertical Scrollbars With “window.open()” in JavaScript?

The “window.open()” method by default adds a vertical scrollbar depending on the length of the new webpage content and the size of the opened window. If the content of the webpage is greater than the window size then, the scrollbar gets added by default without applying any CSS properties. However, if the developer wants to add a custom scrollbar, then you can follow the methods explained in the below examples.

Syntax

The syntax for the “window.open()” method is stated below:

Here, “path” is the path of the webpage that is going to be opened in a new window. The “destination” is the location of the new window to appear, it can be set to “blank”, “parent”, “self” or “top”. The third parameter is the “winFeat” or window features, it offers various values that can be set according to the need to customize the window.

Let’s have a look over some examples to generate a vertical scrollbar in the newly opened window using the “window.open()” method.

Example: Use of “scrollbars” Window Feature With “window.open()” Method

In this case, the “window.open()” method is used along the “scrollbars” Window Features to set the vertical scrollbar for a newly opened window, as shown below:

Explanation of the above code:

• First, the “setScroll()” function is defined inside the “<script>” tag. The variable “newWin” is also created that contains the “window.open()” method in it.
• Next, pass the first parameter of the webpage “link” to the “window.open()” method. Also, set the value of “top” for the second parameter to display the new window at the top position of the web browser.
• After that, to customize the window behavior use the window features of “width”, “height” and “scrollbars” to set the width and height, and scrollbar of the window respectively.
• In the end, create a “button” element that triggers the “setScroll()” function using the “onclick” event listener.

After the end of compilation, the output looks like this:

The output confirms that the scrollbar has been added to the newly generated window.

Example 2: Manually Setting the Scrollbar

Another way to set the scrollbar is by utilizing the CSS “overflow-y” and “overflow-x” properties over the secondary page which is going to be opened in a new window, as shown below:

Description of the above code:

• First, create a “setScroll()” function, and inside it utilizes the “window.open()” method same as done in the above example.
• Also, add an extra window feature of “resizable” and modify the value of “scrollbars” features to “1” to set the vertical scrollbar.

Now, open the CSS file of the webpage whose link is provided as the first parameter to the “window.open()” method. In our case, the webpage name is “linuxhint” so open its CSS file and insert the following code in it:

The above CSS properties of “overflow-x” and “overflow-y” hide the horizontal scrollbar and set the vertical scrollbar for the whole HTML page according to the length of the window.

After inserting and compiling the above code snippets in both files, the output looks like this:

The output shows that a vertical scrollbar has been added to the window opened using the “window.open()” method.

Conclusion

To create vertical scrollbars with the “window.open()” method, the “scrollbars” feature provided by the window can be set to “yes” or “1”. Another way is to open the CSS or HTML file for the webpage whose link is passed as the first parameter in the “window.open()” method and there utilize the CSS “overflow-x” and “overflow-y” properties. This blog has explained the ways to add a vertical scrollbar with the window.open() method in JavaScript.