How to Lock the Scroll Bar With JS
The JavaScript (JS) language lets you control the styles associated with your HTML pages. You lock the scrollbar in JavaScript using the "overflow" CSS property. When you set the property to the "hidden" value, the scrollbar locks and any additional information is hidden from the user's view. Even if the data is hidden, it is still available in the browser code.
Other People Are Reading
Instructions
-
-
1
Right-click the HTML file you want to edit. Click "Open With," then click the HTML editor for your Web pages.
-
2
Locate the div or other HTML editor that contains a scroll bar. Typically, div or iframe tags contain scroll bars for data that extends beyond the viewing length or width of the tag. Take note of the elements value in the ID property. You need the ID for the JavaScript function.
-
-
3
Add the overflow style property to the element using JavaScript. Add the following JavaScript function to lock the scroll bar:
function lockscroll() {
document.getElementById("thediv").style.overflow = "hidden";
}
Replace "thediv" with the div id you noted in Step 2.
-
1
