How to remove scroll bars? Removing horizontal scrolling without adding additional vertical scrolling

This video is about how to remove the scroll bar when viewing and publishing a website in Adobe Muse.

There are 2 ways how this can be done:
1. The first of them is to simply remove elements that are outside the content area in the “Design” mode of the page.
2. The second is by placing a special html code in the head section of the page.

Watch this video:

“In this video tutorial we will look at how to remove the scroll bar

How to remove the scroll bar. Description of the problem.

Let's open the program right away, a new project has been created here. Here we'll make a 75% scale, just in case. And let's enlarge the page. Let's say we have several objects on the page - one, two, three. Here we have some text, logos, pictures, whatever. And you accidentally placed an object outside the page's content area.

When you click the "selection" icon, this object will not be visible to you. Especially if you have the “show frame margins” function turned off, and in previous versions this was the default, the edges of the frame were visible only when you hovered the mouse over it. The object that is located outside the page will not be visible at all until you hover your mouse over it.

Thus, when viewing a page in a browser, you experience horizontal scrolling, which is so annoying for everyone on the site. In addition, if you have the background color of the page set to green, for example, then when you view and scroll to the bottom of the page, you will see that your page has horizontal scrolling, so it will be better visible.

How to remove the scroll bar. Solution 1.

We are going to page design mode, even if you have the “frame edges” function turned off, you can press the key combination Ctrl+A and thus select all the objects on your page. Next, reduce the scale to 50% or hold down the Alt key and roll the mouse wheel towards you. This way you will see that you have objects behind the page content area.

In order to remove horizontal scrolling, you need to remove these unnecessary objects, or move them to the page content area.

We press the Ctrl+ key combination, and we see that we have nothing behind the page content area.

We go to view mode, and now we have no horizontal scrolling in the browser.

How to remove the scroll bar. Solution 2.

If you were unable to remove horizontal scrolling using this method, then there is another way when you can simply disable this scrolling on your page.

You need to go to the “Page” menu, “ ”, and here in the “Metadata” section, in the HTML block for head, insert some code, which I will show you now. You can see this code in the description of this video, copy and paste it. This is what he looks like.

Select it (I press the key combination Ctrl+C), go back to the page design mode, insert it here in the page properties, and click OK.

Thus, even if some block is located outside the page content area, when viewing the page in a browser, you will also not have horizontal scrolling.

How to remove the scroll bar. Conclusion

This concludes our lesson. In it we learned how to remove the scroll bar when viewing a page in a browser in Adobe Muse.

And I’m not saying goodbye to you, subscribe to my channel, like, write comments and watch my previous and next video lessons. See you friends, bye.”

How to remove the scroll bar. Addition to the lesson.

For those who this code does not work and the scroll bar still remains, try clearing your browser cache first. You can also try these codes instead of the one presented above:

Removing horizontal scrolling without adding additional vertical scrolling:

html (overflow-x: hidden) div ( height : "100%" ; )

Removing any scroll:

How to turn off scrolling?

Master's answer:

Scrolling is needed when you need to move around a document or website, and their size does not limit the screen size. There are vertical and horizontal scrolling. If scrolling is disabled, full viewing of resources will become impossible.

Scrolling is a configurable setting. Basic settings can be set using the “Mouse”, and they will apply to all applications, and the scrolling method can be set and canceled using the browser. These settings will work while surfing the Internet.

To disable smooth scrolling while browsing Internet resources, launch the browser and select the “Settings” section in the “Tools” menu. For Internet Explorer, this will be the Tools menu and the Internet Options section. If the menu is not displayed, click on the top or bottom panel of the browser window and mark the “Menu Bar” or “Menu Bar” sub-item in the menu with a marker.

After opening the “Settings” window, go to the “Advanced” tab and make the “General” subsection active. Find the “Site Viewing” group and uncheck the “Use smooth scrolling” box, then click the “OK” button.

To disable automatic scrolling, uncheck the “Use automatic scrolling” box. For Internet Explorer, the method will be slightly different - you need to move through the list of available settings, using the scroll bar, until the necessary items are found.

In order to configure general scrolling settings, we turn to the “Mouse” component, for which we call “Control Panel” (from the “Start” menu). Let's go to the "Printers and other equipment" category and click on the "Mouse" icon.

The “Properties: Mouse” window will open, after which you need to go to the “Wheel” tab and configure the scrolling according to your requirements. The marker that is set in the “Screen” field will move the image across the monitor at a distance equal to the height of the screen.

If this parameter is too large for us, we can set a marker in the “For the specified number of lines” field and enter the required value using the keyboard or arrow buttons. The value “0” cannot be set. Apply the changes made and close the window.

Task

Remove horizontal or vertical scroll bars from the page, regardless of page size.

Solution

Before you remove scroll bars from a web page, consider whether you really need them. The inability to scroll document content makes it difficult for site visitors to view information. If there is an urgent need to build design delights or a desire to create difficulties for your readers, then go ahead. But you have been warned!

The method is based on using the overflow property, which is added to the HTML selector, as shown in Example 1.

Example 1: Page without scroll bars

HTML5 CSS2.1 IE Cr Op Sa Fx

Scrollbars html ( overflow: hidden; ) div ( height: 2000px; ) Blah blah

This example uses the hidden value, which “cuts off” all content outside the element.

You can also use the overflow-x property to hide only the horizontal scrollbar and overflow-y to hide the vertical scrollbar. Example 2 shows adding a layer with a minimum width of 800 pixels. When the browser window is reduced to this size, the layer stops changing its size and a horizontal scroll bar appears. The overflow-x property hides scrollbars.

Example 2: No horizontal scroll bar

HTML5 CSS3 IE Cr Op Sa Fx

Scrollbars html ( overflow-x: hidden; ) div ( min-width: 800px; /* Minimum width */ background: #fc0; /* Background color */ padding: 10px; /* Margins around text */ ) Bla- blah

The overflow-x and overflow-y properties are part of the CSS3 specification and are not validated by CSS2.1 style checks.

I'm using the scrollTo jQuery plugin and would like to know if it's possible to temporarily disable scrolling of a window element via Javascript? The reason I would like to disable scrolling is because when you scroll, when the scrollTo function animates, it gets really ugly ;)

Of course I could do $("body").css("overflow", "hidden"); and then return it to automatic mode when the animation stops, but it would be better if the scrollbar was still visible but inactive.

27 answers

The scroll event cannot be canceled. But this can be done by canceling the following interaction events:
Mouse & Touch Scrolling and Scrolling Related Buttons.

[Working demo] // left: 37, up: 38, right: 39, down: 40, // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36 var keys = (37: 1 , 38:1, 39:1, 40:1); function preventDefault(e) ( e = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue = false; ) function preventDefaultForScrollKeys(e) ( if (keys) ( preventDefault(e); return false; ) ) function disableScroll() ( if (window.addEventListener) // older FF window.addEventListener("DOMMouseScroll", preventDefault, false); window.onwheel = preventDefault; // modern standard window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE window.ontouchmove = preventDefault; // mobile document.onkeydown = preventDefaultForScrollKeys; ) function enableScroll() ( if (window.removeEventListener) window.removeEventListener("DOMMouseScroll", preventDefault, false); window .onmousewheel = document.onmousewheel = null; window.onwheel = null; window.ontouchmove = null; document.onkeydown = null; )

Do this by simply adding a class to the body:

Stop-scrolling ( height: 100%; overflow: hidden; )

Add a class and remove it if you want to re-enable scrolling, tested in IE, FF, Safari and Chrome.

$("body").addClass("stop-scrolling")

For mobile devices you need to handle the touchmove event:

$("body").bind("touchmove", function(e)(e.preventDefault()))

And unpin to enable scrolling again. Tested in iOS6 and Android 2.3.3

$("body").unbind("touchmove")

The following solution is basic but pure JavaScript (no jQuery):

Function disableScrolling())( var x=window.scrollX; var y=window.scrollY; window.onscroll=function())(window.scrollTo(x, y);); ) function enableScrolling())( window.onscroll=function( )(); )

I'm sorry to reply to an old post, but I was looking for a solution and came across this question.

There are many ways to solve this problem to still display the scrollbar, such as giving the container a height of 100% and an overflow-y: scroll style.

In my case, I just created a div with a scrollbar, which I display by adding overflow: hidden to the body:

Function disableScroll() ( document.getElementById("scrollbar").style.display = "block"; document.body.style.overflow = "hidden"; )

The element's scrollbar should have the following styles:

Overflow-y: scroll; top: 0; right: 0; display: none; height: 100%; position: fixed;

The gray scroll bar is shown here, hopefully it will help future visitors.

According to galambalazs' post, I would add support for touch devices, allowing us to touch but not scroll up or down:

Function disable_scroll() ( ... document.ontouchmove = function(e)( e.preventDefault(); ) ) function enable_scroll() ( ... document.ontouchmove = function(e)( return true; ) )

I was looking for a solution to this problem, but was not satisfied with any of the above solutions (at the time of writing this answer), so I found this solution.

ScrollDisabled ( position: fixed; margin-top: 0; // override by JS to use acc to curr $(window).scrollTop() width: 100%; )

Var y_offsetWhenScrollDisabled=0; function disableScrollOnBody())( y_offsetWhenScrollDisabled= $(window).scrollTop(); $("body").addClass("scrollDisabled").css("margin-top", -y_offsetWhenScrollDisabled); ) function enableScrollOnBody())( $( "body").removeClass("scrollDisabled").css("margin-top", 0); $(window).scrollTop(y_offsetWhenScrollDisabled); )

Another solution:

This way you always have a vertical scrollbar, but since most of my content is longer than the viewport, this is fine for me. The content is centered using a separate div element, but without resetting the margin in the body, my content will remain on the left.

These are the two functions I use to show my popup/modal:

Var popup_bodyTop = 0; var popup_bodyLeft = 0; function popupShow(id) ( $("#"+ id).effect("fade"); $("#popup-overlay").effect("fade"); // remember current scroll-position // because when setting/unsetting position: fixed to body // the body would scroll to 0.0 popup_bodyLeft = $(document).scrollLeft(); popup_bodyTop = $(document).scrollTop(); // invert position var x = - popup_bodyLeft; var y = - popup_bodyTop; $("body").css("position", "fixed"); $("body").css("top", y.toString() +"px"); $( "body").css("left", x.toString() +"px"); ) function popupHide(id) ( $("#"+ id).effect("fade"); $("#popup -overlay").effect("fade"); $("body").css("position", ""); $("html, body").scrollTop(popup_bodyTop); $("html, body" ).scrollLeft(popup_bodyLeft); )

Result: non-scrolling background and repositioning of content due to left scrollbar. Tested with current FF, Chrome and IE 10.

How about this? (If you are using jQuery)

Var $window = $(window); var $body = $(window.document.body); window.onscroll = function() ( var overlay = $body.children(".ui-widget-overlay").first(); // Check if the overlay is visible and restore the previous scroll state if (overlay.is( ":visible")) ( var scrollPos = $body.data("scroll-pos") || ( x: 0, y: 0 ); window.scrollTo(scrollPos.x, scrollPos.y); ) else ( / / Just store the scroll state $body.data("scroll-pos", ( x: $window.scrollLeft(), y: $window.scrollTop() )); ) );

Depending on what you want to achieve with remote scrolling, you can simply fix the element you want to remove scrolling from (on click or whatever trigger you want to temporarily disable scrolling)

I was looking for a "temp no scroll" solution and for my needs this solved it

make a class

Fixed( position: fixed; )

then with Jquery

Var someTrigger = $("#trigger"); //a trigger button var contentContainer = $("#content"); //element I want to temporarily remove scroll from contentContainer.addClass("notfixed"); //make sure that the element has the "notfixed" class //Something to trigger the fixed positioning. In this case we chose a button. someTrigger.on("click", function())( if(contentContainer.hasClass("notfixed"))( contentContainer.removeClass("notfixed").addClass("fixed"); )else if(contentContainer.hasClass("fixed "))( contentContainer.removeClass("fixed").addClass("notfixed"); ); ));

I found this to be a fairly simple solution that works well in all browsers and is also suitable for easy use on portable devices (e.g. iPhone, tablets, etc.). Since the element is temporarily fixed, there is no scrolling :)

ATTENTION! Depending on the placement of your "contentContainer" element, you may need to adjust it to the left. Which can be easily done by adding a left CSS value to this element when the fixed class is active

ContentContainer.css(( "left": $(window).width() - contentContainer.width()/2 //This would result in a value that is the windows entire width minus the element we want to "center" divided by two (since it "s only pushed from one side) ));

From my jQuery popup project https://github.com/seahorsepip/jPopup p>

//Freeze page content scrolling function freeze() ( if($("html").css("position") != "fixed") ( var top = $("html").scrollTop() ? $(" html").scrollTop() : $("body").scrollTop(); if(window.innerWidth > $("html").width()) ( $("html").css("overflow-y ", "scroll"); ) $("html").css(("width": "100%", "height": "100%", "position": "fixed", "top": -top )); ) ) //Unfreeze page content scrolling function unfreeze() ( if($("html").css("position") == "fixed") ( $("html").css("position" , "static"); $("html, body").scrollTop(-parseInt($("html").css("top"))); $("html").css(("position": "", "width": "", "height": "", "top": "", "overflow-y": "")); ) )

This code takes into account the issues of width, height, scrollbar and page jump.

Possible issues resolved with the above code:

• width, with a fixed installation position, the width of the html element can be less than 100%
• height same as above
• scrollbar when, at a fixed position, the position of the page content no longer has a scrollbar, even if it had a scrollbar before the page jump occurred
• pagejump, when the position setting is fixed, scrollTop is no longer in effect, causing the page to jump vertically

If anyone has any improvements to the freeze/thaw code of the above page, please let me know so I can add those improvements to my project.

As of Chrome 56 and other modern browsers, you must add passive:false to the addEventListener call to get preventDefault to work. So I use this to stop scrolling on mobile:

Function preventDefault(e)( e.preventDefault(); ) function disableScroll())( document.body.addEventListener("touchmove", preventDefault, ( passive: false )); ) function enableScroll())( document.body.removeEventListener(" touchmove", preventDefault, ( passive: false )); )

Building on Cheyenne Forbes's answer, which I found here via fcalderan: Just disable the scroll not hide? and fix scrollbar disappearing issue in Hallodom

Preventscroll( position: fixed; overflow-y:scroll; )

Whatever.onclick = function())( $("body").addClass("preventscroll"); ) whatevertoclose.onclick = function())( $("body").removeClass("preventscroll"); )

This code gets you to the top of the page, but I think fcalderan's code has a workaround.

I have the same problem, below is the way to solve it.

/* file.js */ var body = document.getElementsByTagName("body"); //if window dont scroll body.classList.add("no-scroll"); //if window scroll body.classList.remove("no-scroll"); /* file.css */ .no-scroll( position: fixed; top: 0; bottom: 0; left: 0; right: 0; )

hope this helps.

The easiest way:

$("body").css("overflow", "hidden"); // Remove the scroll bar temporarily

To cancel this:

$("body").css("overflow", "auto");

Easy to implement, but the only drawback is:

• The page will move slightly to the left if it is centered (horizontally).

This is because the scrollbar has been removed and the viewport has become slightly wider.

Here is my solution to stop scrolling (without jQuery). I use it to disable scrolling when the side menu appears.

Disable/Enable scroll var noscroll_var; function noscroll())( if(noscroll_var)( document.getElementsByTagName("html").style.overflowY = ""; document.body.style.paddingRight = "0"; noscroll_var = false )else( document.getElementsByTagName("html ").setAttribute("style", "overflow-y: hidden !important"); document.body.style.paddingRight = "17px"; noscroll_var = true ) )/*noscroll()*/ for(var i=0 ;i