Member Avatar for iball

So yeah my history page is going to be pretty long and would be nice to have a scrollbar in the text bar. But i want to be my own. How can i do it? Java..css..how??

  • 3 Contributors
  • 2 Replies
  • 57 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by macneato

Dani AI

Generated

for a long text section, you can keep native scrolling (fast, accessible) and still make the scrollbar your own. ’s JavaScript route can work, but custom scroll logic often breaks keyboard/touch behavior and harms performance. As suggested, start with CSS and enhance the native control instead.

Modern browsers let you style scrollbars directly: Chromium/Safari via ::-webkit-scrollbar, and Firefox via scrollbar-color and scrollbar-width. Example:

.scrollbox {
  max-height: 22rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* iOS momentum */
  scrollbar-width: thin;               /* Firefox */
  scrollbar-color: #888 #f1f1f1;       /* Firefox thumb/track */
}

/* Chromium/Edge/Safari */
.scrollbox::-webkit-scrollbar { width: 12px; }
.scrollbox::-webkit-scrollbar-track { background: #f1f1f1; }
.scrollbox::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 6px;
  border: 3px solid #f1f1f1;
}
.scrollbox::-webkit-scrollbar-thumb:hover { background-color: #555; }
<div class="scrollbox" tabindex="0">
  <!-- long history content -->
</div>

Tips:

  • Make the box focusable so users can scroll with the keyboard (tabindex).
  • Keep good contrast and a sensible width; avoid hiding scrollbars entirely.
  • Test on mobile and desktop; overlay scrollbars on macOS may look different.
  • Prefer CSS over JS unless you truly need custom behavior; native scroll preserves selection, momentum, and accessibility out of the box.
  • For a <textarea>, the same CSS pattern applies to its scrollbar.

Recommended Answers

All 2 Replies

Member Avatar for buddylee17

You can do it with JavaScript. Have a look at this example.

Member Avatar for macneato

Hi Iball,

You could use CSS... Below is a article that should walk you through doing it.

Here

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.