How do I disable vertical scroll on a website on desktop and laptop screen resolutions? [on hold]

67
June 13, 2018, at 3:50 PM

so we are designing a website for a client, we are building our design to a wordpress frame work, the problem is we need the website to be totally unscrollabe on the screen for desktops and laptops.

The div content (main content) where the content overflows has vertical scroll but in general the whole screen should not be scrollabe. We are having a difficult time making it into a different screen sizes, since we are changing the margins and paddings for almost all different screen resolutions manually.

IS there a better way it can be achieved in CSS or jquery?

You can check the demo we have created at: http://demo.unboundcodes.com/khandelwal/

It is done for a few popular screen sizes, but we cannot still achieve success because there are still some spacing issues between header and main content on pages.

Answer 1

The best solution to make your website responsive for different screen sizes and platforms is to use css media queries. You can specify the behavior for laptop screens, desktops, mobiles and tablets separately. In there you can use the following css property for laptops and desktops

overflow-x: hidden //if you want to stop x-axis scrolling
overflow-y: hidden //if you want to stop y-axis scrolling
overflow: hidden  //if you want to stop x and y-axis scrolling

For detailed description, please have a look into this: CSS Media Queries

Answer 2

You can use the CSS property overflow:hidden; to the body to prevent scroll. Or you can secure the body dimensions with width:100%; height:100%;

Answer 3

A quick, non-elegant but working standalone solution with inline CSS and no jQuery requirements. it works from IE9 too. try below code may be it helps

<body style="overflow:hidden; margin:0">
    <form id="form1" runat="server">
        <div id="main" style="background-color:red">
            <div id="content">
            </div>
            <div id="footer">
            </div>
        </div>
    </form>
    <script language="javascript">
        function autoResizeDiv()
        {
            document.getElementById('main').style.height = window.innerHeight +'px';
        }
        window.onresize = autoResizeDiv;
        autoResizeDiv();
    </script> </body>
READ ALSO
Get dynamically created element that was click javascript

Get dynamically created element that was click javascript

I'm trying to track what buttons users click via javascript/jqueryI have the following code

56
Override document.write

Override document.write

I'm trying to override documentwrite so i will be able to take the raw html parse it make some manipulations on the code and return the call

65
Accessing Object inside Array

Accessing Object inside Array

I'm trying to access values inside Firebase array > object

44