Stop overflow scrolling code#

Therefore, a modification to the code can be made that will apply the changes not only to the body, but to the HTML itself through the following modification: This is because the browser may interpret the html element as the root scrolling container, not the body. In some browsers or scenarios, simply setting the overflow property on the body might not be sufficient to disable scrolling. Once you've done this, add the script to your custom code section in Webflow, and your body should no longer scroll when the menu is open. menu-class-name with the class names that you've assigned to your menu button and menu, respectively. This can be useful for focusing user attention on a navigation menu when it's open and avoiding distractions.

When an element with the class menu-class-name is clicked, scrolling is re-enabled. When an element with the class menu-button-class is clicked, scrolling is disabled. In summary, the code toggles the scrolling ability of the webpage when certain elements are clicked. $('body').css('overflow', 'auto'): This sets the CSS overflow property of the element back to auto, which allows the webpage to be scrollable again. Setting the overflow-x to hidden will clip the text according to the viewport, and the horizontal scroll bar will be (function() ): This line listens for a click event on any HTML element with the class menu-class-name. Until now, the horizontal scroll bar has worked finely. To achieve the text in a single line, we need to set the parent container’s white-space property to nowrap. When we set display to inline-block, it forces the text to be shown in a single line. Then, set overflow-x to hidden selecting the body tag. Set the white-space property to nowrap in the html tag. In CSS, set the display property to inline-block for the body tag. Do not use br tag so that the text does not appear in the next line.

We can loop a text multiple times in PHP and use CSS to force it to appear in one line.įor example, loop the text Helloo World using PHP as in the method above. We can test the disabling of the scroll bar horizontally by limiting a text to only one line. We can use the overflow-x property and set it to hidden to disable the horizontal scroll bar in CSS. Set overflow-x to hidden to Disable Horizontal Scroll Bar in CSS It will disable the scroll bar vertically. We can even use overflow-y instead of overflow and set it to hidden. We can even set the margin property to 0 if the margin has been overridden with some other value to disable the scroll bar.

The text will be clipped to the height of the browser, and the rest will be invisible. The height of these containers will equal the browser’s height. It means the body and height will have 100% height of their parent containers. In the example below, we have set the height of the html and body to 100%. Then, set the overflow property to hidden. Set the margin to 0 and give the height of 100%. Include the PHP inside the body of the HTML. This creates 100 lines of the text Hello World. Do not forget to add the br tag while displaying the variable. Use the for loop to iterate it 100 times. Then we will disable the scroll bar.įor example, create a variable $text in PHP and give the value Hello World to it. We will use PHP to generate a long text on our webpage. We can set it to scroll to add a scrollbar to view the rest of the unclipped content. When we use the hidden value for the overflow property, the content is clipped to the area of the element, and the rest of the element will turn invisible. The scrollbar can be hidden or made visible when the content of an element is larger than the specified area. The overflow property defines the behavior of the scrollbar in a webpage. We can use the CSS overflow property to disable the scroll bar in CSS. Set overflow to hidden for the html and body Tags to Disable Scroll Bar in CSS

Stop overflow scrolling