CSS Clipping and browser scroll bars

  • rafaelwall
  • Newbie
  • Newbie
  • rafaelwall
  • Posts: 5

Post 3+ Months Ago

Hi folks!

I searched the forum for a similar thread, to no avail. If this question has been asked before, I apologize in advance.

I'm working on a game made entirely in Javascript. The game has some scrolling, and this is what I did in order to achieve that:

.- A div containing all the game action (let's call it world div), which is wider than the actual user screen. The world div is clipped with the CSS clip attribute, so only part of it is visible. The clipped area acts like a "viewport."

.- As the user moves around, this div is, well, scrolled around. As you may have figured it out, this is achieved by dynamically changing the top/left properties of the world div, as well as the clipping coordinates.

Everything is all good up to here. It actually works as expected. Except for....

The browser acts as if the full world div is being displayed and thus it shows scroll bars when none is necessary. Not only that, but as the world div is moved around, the scroll bars are updated, so you can see them moving as the world scrolls.

One might argue whether or not this side effect looks unprofessional, but my main concern is that it's distracting.

Is there any way to tell the browser not to take the world div into account when displaying the scroll bars?

Notice that I don't want them to be disabled completely (portability/accessibility issues). Just not show them since the "clipped" portion of the div is well within the user screen's real estate.

I've considered a couple of alternatives, such as using an IFRAME, or simulating the scrolling by moving the objects inside. These solutions imply changing many references in my code... very time-consuming! So I'd use them as a last-resource, run-out-of-options thing. Oh, the beauty of afterthoughts.


Any suggestions? (And many thanks! :) )
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

overflow: hidden?

edit - just read up on hidden and it appears to not do what it used to. You still used to be able to scroll it with hidden bars but not anymore. No idea when they changed it lol, I haven't used it in years.
  • rafaelwall
  • Newbie
  • Newbie
  • rafaelwall
  • Posts: 5

Post 3+ Months Ago

neksus wrote:
overflow: hidden?

edit - just read up on hidden and it appears to not do what it used to. You still used to be able to scroll it with hidden bars but not anymore. No idea when they changed it lol, I haven't used it in years.


I've tried it for the sake of it anyways, and indeed it hides the scroll bars, but again, it hides them even if there is actual content outside the screen (which is not good...in that case, scroll bars are needed).

But thanks anyway, neksus.

Why does the browser "think" the div is being displayed in all its glory, even though it's clipped? Is this standard behavior, dictated by w3c? Let's take a look at that.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

I don't think there's a way to not show scrollbars if you still need to scroll.

Even if you loaded an iFrame with the target being the application, even though the iFrame wouldn't have scrollbars the content div inside would.
  • rafaelwall
  • Newbie
  • Newbie
  • rafaelwall
  • Posts: 5

Post 3+ Months Ago

In essence, I want the scroll bars to be present whenever needed. That'll make the page friendly to all users.

Reading through the specification, I've came across this:

"Content that has been clipped does not cause overflow."

That sounds like, if the content is bigger than the browser window, it should trigger the scroll bars to show (obviously), but not if it's clipped and contained by such browser window.

Let's see what else it says.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

If you're alright with the scroll bars why don't you just specify the div as a height and width of your desired size and use overflow: auto?
  • rafaelwall
  • Newbie
  • Newbie
  • rafaelwall
  • Posts: 5

Post 3+ Months Ago

Because the div contains one big game world that doesn't fit the browser screen. Hence the clipping trick. I think I'll try another approach. Simulating scrolling by moving all the sprites at the same time, instead of moving just the div. Too bad, because I thought it was a neat trick.... or maybe I'll just consider to put up with the scroll bars ;-) Anyway thanks so much for the help, neksus.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

But I mean...instead of using clipping, can't you just set the width and height to be what your clipping rectangle is now?
  • rafaelwall
  • Newbie
  • Newbie
  • rafaelwall
  • Posts: 5

Post 3+ Months Ago

Great suggestion! It's definitely an improvement. However, the scroll bar thing still occurs when the div "goes off-screen." I've already moved to an alternative approach, so this is not an issue anymore.

Anyhow, thanks for your postings, neksus.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Sounds good, hope everything goes well!

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 36 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.