Css отключить скролл body

How to disable scroll with CSS?

Many times you want to improve the UX of your website and hence keep all the contents on a single screen hence you don’t need a scrollbar. In this tutorial, we will learn how to do exactly disable scroll with CSS on a website.

Pre-requisites

So before we try to remove the scrollbar need to learn about an important CSS property called the overflow property.

Overflow CSS Property

CSS overflow property helps us control what happens when a certain element’s content is bigger compared to the area in which you want to put it.

When this happens, it causes the content to overflow into another pane either vertically (y-axis) or horizontally (x-axis)

Now let’s take a look at all the values the overflow property can take and how each of them work

overflow: visible

When you don’t specify anything to the overflow property this is the default value which takes and you can see your content overflow to another area let’s look at an example of how:

h2>Overflow: visible h2>  div id="visible" class="box">  p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum repellendus sapiente ex, placeat dolor ut. p>  div> 
Code language: HTML, XML (xml)

.box  height: 200px;  width: 400px;  border: 1px solid red; > #visible  overflow: visible; > 
Code language: CSS (css)

overflow: hidden

If you use the hidden value, the overflowing part of the content will be cut off. It will be invisible.

We don’t have to worry about the space taken up by the overflow part. Once the content has been truncated, it is no longer in the area where it had overflowed.

h2>Overflow: hidden h2>  div id="hidden" class="box">  p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum repellendus sapiente ex, placeat dolor ut. p>  div> 
Code language: HTML, XML (xml)

.box  height: 200px;  width: 400px;  border: 1px solid red; > #hidden  overflow: hidden; > 
Code language: CSS (css)

overflow: scroll

Just like the hidden value the scroll value also cuts the content out. But it provides a scrollbar so we can scroll and see the cropped part of the content.

Let’s look at an example of how:

h2>Overflow: scroll h2>  div id="scroll" class="box">  p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum repellendus sapiente ex, placeat dolor ut. p>  div> 
Code language: HTML, XML (xml)

.box  height: 200px;  width: 400px;  border: 1px solid red; > #scroll  overflow: scroll; > 
Code language: CSS (css)

overflow: auto

When you use the auto value for the overflow property, the scroll bar is added only in the direction in which the overflow happens.

If no overflow happens in any direction, no scrollbar will be added.

h2>Overflow: auto h2>  div id="auto" class="box">  p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum repellendus sapiente ex, placeat dolor ut. p>  div> 
Code language: HTML, XML (xml)

.box  height: 200px;  width: 400px;  border: 1px solid red; > #auto  overflow: auto; > 
Code language: CSS (css)

overflow-x & overflow-y

Now if you want to check for overflow in a specific direction that is the x-axis and y-axis you can use the overflow-x and overflow-y properties.

• overflow-y: CSS property to specify what happens when content overflows vertically i.e from top to bottom
• overflow-x: CSS property to specify what happens when content overflows horizontally i.e from left to right.

The same four values of visible scroll and auto can be used with these properties as well.

Hide Scrollbars

To completely hide the scrollbars from your page, as we saw earlier we can use the overflow: hidden property.

It hides both the vertical and horizontal scroll bars.

body   overflow: hidden; > 
Code language: CSS (css)

If you want to hide only the vertical scrollbars or the horizontal scrollbars you can use the overflow-y and overflow-x properties as required.

body   overflow-x: hidden; /*hides horizontal scrollbar*/  overflow-y: hidden; /*hides vertical scrollbar*/ > 
Code language: CSS (css)

Bonus: Hide but still Scroll

Now here’s a bonus tip if you want to just hide the scroll bars but not completely get rid of the functionality that the scrollbars provide you can use the following code on your website:

h2>Bonus: Scroll but hide Scrollbars h2>  div class="bonusBox">  p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum repellendus sapiente ex, placeat dolor ut! . p>  div> 
Code language: HTML, XML (xml)

 /* Hide scrollbar for IE, Edge and Firefox */ .bonusBox   height: 200px;  width: 400px;  border: 1px solid green;  overflow-y: scroll;   -ms-overflow-style: none; /* IE and Edge */  scrollbar-width: none; /* Firefox */ > /* Hide scrollbar for Chrome, Safari and Opera */ .bonusBox::-webkit-scrollbar   display: none; > 
Code language: CSS (css)

Conclusion

In this tutorial, we learn how we can control the overflow of content on a website, and how we can disable scroll with CSS we also got a bonus tip on implementing the scroll functionality but also hiding the scroll bars.

We used codedamn playgrounds in this tutorial and how can try it out yourself by forking this playground.

I hope you liked reading this article! ?

P.S: I have won many hackathons and worked on many projects. You can connect with me on LinkedIn to know about hackathon ideas, internship experiences, and Development tips.

Sharing is caring

Did you like what Subhanu Sankar Roy wrote? Thank them for their work by sharing it on social media.

Источник

How to Disable Scrolling on a Webpage with HTML, CSS, and JavaScript?

Scrolling a webpage while navigating can be controlled by using some JavaScript and CSS or either one of them as well. We shall explore different methods to disable and enable the scrolling functionality of a webpage along with some example code snippets.

Pre-requisite

The prerequisite for understanding this article is the basic understanding of CSS and JavaScript DOM methods like querySelector , and getElementById as well as adding the event listeners to HTML elements.

By Overriding the window.onscroll Function

One of the ways to disable scroll on a webpage is using the window.onscroll event. Let’s understand this event.

window.onscroll

The onscroll event on windows is triggered when the window’s scrollbar is being scrolled.

We can set the position of this windows.onscroll event to a fixed value then it will prevent the page from scrolling in the vertical or horizontal direction or both.

To do this we need to fix the vertical and horizontal position of the page to the current values which can be done using the following JavaScript functions.

Calculating the current vertical position of the page: To calculate the current vertical scroll position of the web page in pixels document.documentElement.scrollTop and window.pageYOffset functions are used with OR (|) operator because one of them may return 0 value in some of the browsers.

document.documentElement.scrollTop method of JavaScript calculates the number of pixels from the top of the webpage by which the page is scrolled down.

The window.pageYOffset method of JavaScript also calculates the number of pixels from the top of the webpage by which the page is scrolled down. Since some of browsers do not support the former method then this method comes as an alternative.

Calculating the current horizontal position of the page:

To calculate the current horizontal position of the webpage in pixels document.documentElement.scrollLeft and window.pageXOffset values functions are used with the OR (|) operator because one of them may return 0 value in the browsers.

The document.documentElement.scrollLeft method is used to get the number of pixels to the left of the page by which the webpage is displaced to the right.

window.pageXOffset values method is also used to get the number of pixels to the left of the page by which the webpage is displaced to the right but the former method is not supported by some of the browsers, therefore, this method comes as an alternative.

Now, to assign the above-calculated values to the windows.scroll event we may use the window.scrollTo() function and pass the calculated values in this function as arguments to fix the horizontal and vertical position of the webpage.

Let’s see the implementation of the above functionality.

Let’s try to understand the above snippet. The output of the above code looks like this.

Here, when we click the Disable Scrolling button then we trigger the function disableScroll() where we are calculating the scroll position in the vertical direction in the scrollTop variable and the scroll position in the horizontal direction in the scrollLeft variable. After calculating these values we assign them to the scroll event of the window using the function called window.scrollTo(scrollTop,scrollLeft) .

When the Enable Scrolling button is clicked then we trigger the function enableScroll() which simply puts the value of the window.scroll event to blank and enables scrolling.

By Setting the Height of the Body to 100% and Overflow to Hidden

Scrolling of the webpage can also be disabled by using only the CSS using the overflow property. In this method, we set the height of the element for which the scroll is disabled to 100% such that it covers all the space of its parent container, and then we set the overflow property to hidden.

For the horizontal scrolling, we use the property overflow-x and set it to hidden.

We shall use JavaScript to add these properties to the HTML document.

Let’s see the implementation

It will have the same effect as with the window.onscroll but with a few differences. Let’s discuss those differences.

1. It will disable the keyboard scrolling as well. Therefore we won’t be able to move up and down using a keyboard, mouse or spacebar, etc.
2. It will disable the touch scroll as well
3. It will disable the scroll up and down by selecting the text.

Set overflow-x to Hidden to Disable Horizontal Scroll Bar in CSS

For disabling the horizontal scrolling we can set the property overflow-x to hidden along with the height is set to 100%. Everything else remains the same. Let’s see the implementation for this.

Preventing Keyboard Scroll Using JavaScript

Suppose, we want to prevent only the keyboard scroll but want to keep other scrolls, in that case, we need to add a keydown event Listener because this will detect which key is pressed and we can prevent the default behavior of the document if the key pressed is keyboard arrows, spacebar, shift+space bar, pageup, pagedown, etc.

We create an event Listener which takes an event argument and checks if the event(button pressed) has a keyCode equal to some of the keycodes already stored in an array. If it matches with one of them then we call the function preventDefault() and return false. This will disable the scrolling effect using that key.

To enable the scrolling effect we simply remove that eventListner added with that particular keypress.

Let’s see the implementation of the above strategy.

Preventing Touch Scroll Using JavaScript

To prevent the touch scroll, we need to add a touchmove event listener which prevents the default behavior while we perform touch scroll. This can be accomplished by creating a function called disableTouchScroll() which takes a touchmove event and prevents the default behavior using the function preventDefault() and stops the propagation using the stopPropagation() function of the event.

This can be implemented as follows

Applying CSS to Hide the Scrollbar in Website’s Code

To hide the scrollbar in the website’s code we can use the -ms-overflow-style property in the body element where we can set it to node as well as the -webkit-scrollbar property where we set the display property for this as none, this ultimately hides the scrollbar.

Let’s understand this with the implementation:

Using the above css one can hide the scrollbar.

Conclusion

1. We conclude that the scrolling effect of a webpage can be controlled using CSS and JavaScript.
2. One of the methods to disable and enable scrolling is to override the window.onscroll method.
3. We can also control specific scroll events like touch scroll, keyboard scroll, etc.
4. Scrolling is controlled in two directions i.e. vertical and horizontal.
5. Some of the important functions involved in the calculation of the scrolled amount of webpage are as follows.
   • document.documentElement.scrollTop.
   • document.documentElement.scrollLeft.
   • window.pageYOffset.
   • window.pageXOffset.

Источник