All geek questions in one place

How to get a page to stop vertical scrolling?

I have a very nasty problem. I am trying to create a page with a full background image that resizes and fills the browser screen. Currently, half of it works, but for some reason you have to scroll down, like 20-30px. What the user should not do.

This is the page source:

<!DOCTYPE html> <html> <head> <title></title> <link href="/Content/css/reset.css" rel="stylesheet" type="text/css" /> <link href="/Content/css/Site.css" rel="stylesheet" type="text/css" /> <link href="/Content/css/menu.css" rel="stylesheet" type="text/css" /> <link href="/Content/css/layout.css" rel="stylesheet" type="text/css" /> <link href="/Content/css/scroll.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/jquery-1.6.4.js" type="text/javascript"></script> <script src="/Scripts/backstretch.js" type="text/javascript"></script> <script type="text/javascript"> /** var images = [ "/content/images/bghome.jpg", "/content/images/background.jpg" ]; var index = 0; $.backstretch(images[index], { speed: 500 }); setInterval(function () { index = (index >= images.length - 1) ? 0 : index + 1; $.backstretch(images[index]); }, 5000); **/ $.backstretch("/content/images/background.jpg"); </script> </head> <div class="menu-link"> <ul> <li> <a href="/Home/Index">home</a> </li> <li> <a href="/content/1/10/background.html">profile</a> </li> <li> <a href="/content/1/3/portfolio.html">portfolio</a> </li> <li> <a href="/news/">news</a> </li> <li> <a href="/project/">current projects</a> </li> <li class="on"> <a href="/content/1/6/awards.html">awards</a> </li> <li> <a href="/ContactUs/">contact</a> </li> </ul> </div> <div id="left-sidebar"> <div id ="logo"> <image src="/content/images/logo.png"/> </div> <div id = "leftcontent"> <p> </p> </div> <div id ="foot"> <ul> <li> <a href="/content/2/20/privacy.html">Privacy</a> </li> <li> <a href="/content/2/21/sitemap.html">Sitemap</a> </li> <li class="last"> <a href="/content/2/19/terms---conditions.html">Terms & Conditions</a> </li> </ul> © 2012 SH Structures. All rights reserved. &nbsp;&nbsp;&nbsp;<image src="/content/images/footimg.png"/> </div> </div> <div id="right-sidebar"> </div> <div id="content"> <div id = "freestylecontent"> <h1>awards</h1> <br><br><br> <div id = "freecontent"> <p> </p> <br><br> </div> </div> </div> </html>

Css:

  html, body { height: 100%; width: 100%; padding: 0px; margin: 0px; } body { } /* IE7 Fix */ * html #container { display: table; height: 100% } /* Opera Fix */ body:before { content: ""; height: 100%; float: left; width: 0; margin-top: -32767px; } /* IE6 Fix */ * html div#body { overflow: visible; } div#container { height: 100%; height: auto !important; background: url("left-sidebar-back.gif") repeat-y top left; } div#main { overflow: auto; padding-bottom: 100px; } div#header { height: 100px; background: #ba6f19; border-bottom: 1px solid #000; padding: 20px; } div#body { overflow: hidden; height: 100%; } div#content { margin: 0px 0px 0px 415px; width: 375px; padding: 20px; background:url(../images/greenfade.png); opacity:0.8; height:100%; color:White; } div#left-sidebar { width: 375px; float: left; height:100%; padding: 20px; background:black; opacity:0.8; color:White; } div#right-sidebar { width: 260px; float: right; padding: 20px; } div#footer { background: #ba6f19; border-top: 1px solid #000; position: relative; height: 100px; margin-top: -101px; clear: both; } div#footer p { padding: 20px; margin: 0px; } .menu-link{ font-size:1em; height:40px; padding-left:10px; width:100%; margin-left:auto; margin-right:auto; background:black; } .menu-link a{ padding: 10px 0px 10px 0px; height:40px; color:#fff; text-decoration:none; float:left; } .menu-link ul { padding:0px 0px 0px 20px; } .menu-link ul li { text-decoration:none; float:left; /**background: url(/Content/img/border-line-inside.png) no-repeat right;**/ } .menu-link ul li a { color:#fff; padding: 0px 10px 0px 10px; line-height:40px; display: block; text-align:center; } .menu-link a:hover{ background:url(../images/menu-nav-hov.png) repeat-x; cursor:pointer; } .menu-link ul li.on { background:url(../images/menu-nav-hov.png) repeat-x; /** background-position:center bottom; background-repeat:no-repeat; **/ } /** Side Menu **/ .sideMenu ul li.on a { height:2em; padding-top: 2px; background:url(../images/point.png) no-repeat; font-weight:bold; } .sideMenu ul { padding: 15px 0px 0px 0px; list-style-type:none; font-size:0.9em; width:20em; color:#fff; margin-left:-10px; } .sideMenu ul a{ padding: 2px 20px 0px 0px; color:#fff; text-decoration:none; float:left; width:19.2em; } .sideMenu li a { height:2em; padding-top: 1px; padding-left:15px; } .sideMenu li a:hover{ background:url(../images/point.png) no-repeat; cursor:pointer; padding-left:-15px; } .sideMenu h4{ display:none; } /** Footer **/ #foot { padding-left: 20px; padding-right: 20px; position:absolute; bottom:0; height:60px; height:1.5em; font-size:.8em; } #foot li a { padding: 10px 0px 10px 0px; color:#fff; text-decoration:none; }

Am I missing something? thanks

+4
source share
2 answers

It is impossible to say exactly what you are asking, but if all you want to do is turn off page scrolling, you first need to add the <body> and give it the following style properties:

 <body style="overflow:hidden;"> <!-- Page contents --> </body>
+7
source 
 $('body').on('touchmove', function (event) { event.preventDefault(); });

it can work

0
source

Source: https://habr.com/ru/post/1395798/

More articles:


All Articles