Member Avatar for <M/>

I was creating a page and I began to realize that I can't see the bottom of the site because I can't scroll down...

Can someone help me with that issue...

I will send you the link to the site...

  • 5 Contributors
  • 12 Replies
  • 198 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by <M/>

Dani AI

Generated

Good initial hints from , and — those answers point in the right direction. Below are focused diagnostics and less-obvious causes to try next; the steps are designed to quickly show whether the problem is a CSS rule, an overlay, or script behavior that blocks scrolling.

Run these quick console checks first:

document.documentElement.scrollHeight
window.innerHeight
// true means the document is taller than the viewport
document.documentElement.scrollHeight > window.innerHeight

If that boolean is false, the document is being prevented from growing past the viewport. To locate any element that physically covers the viewport, run:

Array.from(document.querySelectorAll('*')).filter(function(el){
  var r = el.getBoundingClientRect();
  return r.top <= 0 && r.left <= 0 &&
         r.width >= window.innerWidth && r.height >= window.innerHeight;
}).slice(0,10);

Less-obvious causes and how to test them:

  • Invisible full-page layer or modal: use the inspector to toggle visibility or set display:none on large elements found by the snippet. A covering element will immediately restore scrolling when removed.
  • JavaScript that cancels scrolling events: briefly disable JS in the browser or search the codebase for handlers tied to wheel/touch events or for calls that cancel default behavior.
  • Root/wrapper sizing with viewport units or fixed heights: check computed styles of html, body and main wrappers for fixed heights so content can’t extend.
  • Transforms or certain layout modes on ancestors: removing a transform or changing the wrapper’s layout can restore normal scroll behavior.
  • Page embedded in an iframe with scrolling turned off.

Short troubleshooting checklist: test in another browser or private window, disable styles (or unapply suspect rules), disable scripts, run the console checks above, and inspect large elements via the Elements panel. These steps usually make the responsible rule or script obvious without changing much of the page.

Recommended Answers

All 12 Replies

Member Avatar for JameB

Are you setting something to position: fixed;?

Member Avatar for <M/>

I don't believe I am... Shall I send you the link through a pm? I don't wish for the site to be seen publicly just yet...

But thanks for responding :)

Member Avatar for almostbob

look for, as previously noted, position:fixed;,
and
overflow: anything other than 'visible'
in the css

some browsers
(guess which, hint starts with I ends with nternet explorer)
handle overflow badly,
others less badly,
some (few) follow the spec

Member Avatar for JameB

Yeah, you can PM me if you haven't fixed it yet.

Member Avatar for <M/>

I pm you :)

Member Avatar for lps

Maybe you have set the body css to overflow: hidden;
Remove it and it shall be solved.

Member Avatar for <M/>

No.... shall i send you the link to the page?

Member Avatar for JorgeM

You have a few threads open. They seem related. Is this thread resolved or do you need more help on this one?

Member Avatar for <M/>

They are quite similar i know... but there are a few differences...

Member Avatar for <M/>

This one isn't solved though

Member Avatar for lps

if you can provide with the link, maybe we can have it debuged together to solve it.

Member Avatar for <M/>

sent!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.