Member Avatar for w33n

Is it possible to create scrollboxes w/o tables?

  • 2 Contributors
  • 4 Replies
  • 92 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by lio04

Dani AI

Generated

Nice catch by — a block element is the right mental model instead of an iframe. For 's follow-up about the bottom (horizontal) scrollbar: the usual fix is to keep vertical scrolling while preventing horizontal overflow and to make sure child elements cannot exceed the container width. That avoids the horizontal bar rather than hiding it after the fact.

Example patterns to apply:

/* limit height and allow only vertical scrolling */
.container {
  max-height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}

/* prevent wide children from forcing a horizontal bar */
.container img { max-width: 100%; height: auto; }
.container { overflow-wrap: break-word; word-break: break-word; }

If the goal is to hide the scrollbar visually but keep scrolling possible (mobile or keyboard), combine browser-specific rules — for IE/Edge, Firefox and WebKit — but do so with care for accessibility:

.container {
  -ms-overflow-style: none;    /* IE/Edge */
  scrollbar-width: none;       /* Firefox */
}
.container::-webkit-scrollbar { width: 0; height: 0; }  /* WebKit */

When you hide scrollbars, ensure the region remains keyboard-focusable (e.g., add tabindex="0") and provide a visible focus style. For details on the overflow axes and scrollbar rules see overflow-x / overflow-y on MDN and ::-webkit-scrollbar on MDN.

Recommended Answers

All 4 Replies

Member Avatar for lio04

Sure, define any <div> in your CSS file, which will have width and height properities + overflow setting, if is content bigger than box. Something like this:

#box {
	width: 200px;
	height: 400px;
	background: #F2F2F2;
	border: 1px solid #DDDFFF;
	overflow: scroll;
}
Member Avatar for w33n

Sure, define any <div> in your CSS file, which will have width and height properities + overflow setting, if is content bigger than box. Something like this:

#box {
	width: 200px;
	height: 400px;
	background: #F2F2F2;
	border: 1px solid #DDDFFF;
	overflow: scroll;
}

WOW!!! I spent so much time making an iFrame for the first time. That's so much easier! At least I learned more about iframes. Thank you.

Member Avatar for w33n

is there any way to get rid of the bottom scroll bar or am i pretty much stuck w/ it?

Member Avatar for lio04

Replace overflow: scroll; with

overflow: auto;

:) Scrollbars will be dependent on content.

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.