No. 59 of 106

Custom Scrollbar

Scrollbars in your brand colors.

    On this page
  1. Custom Scrollbar
  2. A scrollbar that is really yours
  3. Lightest option, zero JavaScript
  4. Where a custom scrollbar earns its place
  5. Every detail, on brand.
NEWSON · ELEMENT NO. 59

Look at the right edge of this page. It is drawn by the Custom engine: a progress track, a dot for every section — hover to read it, click to jump — and a tooltip with the section name and how far you are. Drag it, click the track, or just scroll as usual.

2 engines14 native presets7 custom stylessection markerssection tooltipdrag & clickauto-hidehover expandhorizontalpage / selector / box
CUSTOM ENGINE · 7 STYLES

The browser bar is hidden and NewsOn draws its own — so it can glow, flow, show progress and markers. Wheel, keyboard and touch scrolling stay native.

pillhairlineneonflowglassprogresscapsuledraghover expand
Gradient pill Custom engine

Council passes budget after late-night vote

CHICAGO — The City Council approved a $16.6 billion budget early Wednesday after a session that ran past 1 a.m., ending weeks of tense negotiations.

What changes for residents

The plan holds property taxes flat, adds 200 police officers over two years and funds a pilot for free bus rides on weekends.

Where the money comes from

Officials leaned on higher parking fees and a one-time transfer from reserves, a move the city’s budget office called “a bridge, not a fix.”

The holdouts

Eleven members voted no, saying the deal leaves a $400 million gap for next year. “We are kicking the can,” said Alderman Ray Delgado.

What comes next

The budget takes effect Jan. 1. A public hearing on the transit pilot is set for Nov. 12 at City Hall.

Gradient pillBlog article · the default: a gradient thumb that widens on hover.
Hairline Custom engine

1. Your account

You are responsible for keeping your login details safe and for all activity under your account. Tell us straight away if you think someone else has used it. This is sample text for the demo and not a real legal document.

2. Subscriptions & billing

Introductory rates last for the period shown at sign-up, then renew at the standard rate. We email you before any price change takes effect. This is sample text for the demo and not a real legal document.

3. Cancellation

You can cancel anytime online. Access continues until the end of the billing period you have already paid for. This is sample text for the demo and not a real legal document.

4. Comments & contributions

Keep comments civil and on topic. Our moderators may remove posts that include personal attacks, spam or misinformation. This is sample text for the demo and not a real legal document.

5. Privacy

We only use your data to run your subscription and, if you agree, to send you newsletters. See our privacy policy for the details. This is sample text for the demo and not a real legal document.

6. Changes to these terms

We may update these terms. The version that applies is the one posted on the date you last renewed. This is sample text for the demo and not a real legal document.

HairlineTerms page · a 3px line that stays out of the way until you need it.
Neon Custom engine
1import { createStore } from './store';
2
3// Keep saved stories in sync across tabs
4const saved = createStore({
5  stories: [],
6  lastSync: null,
7});
8
9export function saveStory(story, section = 'news') {
10  const found = saved.stories.find(s => s.id === story.id);
11  if (found) {
12    found.section = section;
13  } else {
14    saved.stories.push({ ...story, section });
15  }
16  saved.save();
17}
18
19export function unread() {
20  return saved.stories.reduce(
21    (sum, s) => sum + (s.read ? 0 : 1), 0
22  );
23}
24
25window.addEventListener('storage', () => saved.reload());
NeonDeveloper docs · a glowing thumb on a dark code block.
Flowing gradient Custom engine
Hi! 👋 My Sunday print edition didn’t arrive this week. Can you help?
Hello! Sorry about that — let me check your delivery route.
Your carrier route in Evanston had a late truck. A replacement copy goes out today.
Great, thanks! Can I also add digital access?
Yes — print subscribers get all-access digital for $1 more a week. Want me to switch it on?
Perfect, please do.
Done! Check your inbox for the sign-in link. Anything else?
That’s all — have a nice day!
You too, and thanks for reading! 😊
Flowing gradientSupport chat · the colors slowly flow along the thumb.
Glass Custom engine
1The Budget Deal, ExplainedThe Daily Rundown23:42
2Inside the Jobs ReportMarkets Weekly18:05
3A Heat Wave With No EndThe Daily Rundown21:58
4Who Wins the Suburbs?Election Desk31:11
5The New Space RaceScience Friday Notes26:27
6Your Rent, DecodedMoney Matters19:49
7Courtside: Playoff PreviewThe Sports Hour34:22
8What AI Means for Your JobTech Talk28:15
9Fixing the Water PipesLocal Lens17:40
10Weekend ReadsThe Daily Rundown12:33
GlassMusic app · a frosted thumb for dark, colorful designs.
Progress track Custom engine

Council passes budget after late-night vote

CHICAGO — The City Council approved a $16.6 billion budget early Wednesday after a session that ran past 1 a.m., ending weeks of tense negotiations.

What changes for residents

The plan holds property taxes flat, adds 200 police officers over two years and funds a pilot for free bus rides on weekends.

Where the money comes from

Officials leaned on higher parking fees and a one-time transfer from reserves, a move the city’s budget office called “a bridge, not a fix.”

The holdouts

Eleven members voted no, saying the deal leaves a $400 million gap for next year. “We are kicking the can,” said Alderman Ray Delgado.

What comes next

The budget takes effect Jan. 1. A public hearing on the transit pilot is set for Nov. 12 at City Hall.

Progress trackLong read · the track fills as you go, dots mark each heading.
Floating capsule Custom engine

1. Your account

You are responsible for keeping your login details safe and for all activity under your account. Tell us straight away if you think someone else has used it. This is sample text for the demo and not a real legal document.

2. Subscriptions & billing

Introductory rates last for the period shown at sign-up, then renew at the standard rate. We email you before any price change takes effect. This is sample text for the demo and not a real legal document.

3. Cancellation

You can cancel anytime online. Access continues until the end of the billing period you have already paid for. This is sample text for the demo and not a real legal document.

4. Comments & contributions

Keep comments civil and on topic. Our moderators may remove posts that include personal attacks, spam or misinformation. This is sample text for the demo and not a real legal document.

5. Privacy

We only use your data to run your subscription and, if you agree, to send you newsletters. See our privacy policy for the details. This is sample text for the demo and not a real legal document.

6. Changes to these terms

We may update these terms. The version that applies is the one posted on the date you last renewed. This is sample text for the demo and not a real legal document.

Floating capsuleCheckout terms · a floating capsule with markers and the section name.
NATIVE CSS · 14 PRESETS

The browser’s own scrollbar, restyled with CSS. Chrome, Edge and Safari show the full style; Firefox gets the matching colors and width.

gradientslimroundedneonsquareinsetdarkglassrainbowstripedoutlinecandyrevealhidden
Gradient pill Native CSS

Council passes budget after late-night vote

CHICAGO — The City Council approved a $16.6 billion budget early Wednesday after a session that ran past 1 a.m., ending weeks of tense negotiations.

What changes for residents

The plan holds property taxes flat, adds 200 police officers over two years and funds a pilot for free bus rides on weekends.

Where the money comes from

Officials leaned on higher parking fees and a one-time transfer from reserves, a move the city’s budget office called “a bridge, not a fix.”

The holdouts

Eleven members voted no, saying the deal leaves a $400 million gap for next year. “We are kicking the can,” said Alderman Ray Delgado.

What comes next

The budget takes effect Jan. 1. A public hearing on the transit pilot is set for Nov. 12 at City Hall.

Gradient pillPure CSS — no JavaScript at all. Colors, width and radius are yours.
Slim line Native CSS
1The Budget Deal, ExplainedThe Daily Rundown23:42
2Inside the Jobs ReportMarkets Weekly18:05
3A Heat Wave With No EndThe Daily Rundown21:58
4Who Wins the Suburbs?Election Desk31:11
5The New Space RaceScience Friday Notes26:27
6Your Rent, DecodedMoney Matters19:49
7Courtside: Playoff PreviewThe Sports Hour34:22
8What AI Means for Your JobTech Talk28:15
9Fixing the Water PipesLocal Lens17:40
10Weekend ReadsThe Daily Rundown12:33
Slim linePure CSS — no JavaScript at all. Colors, width and radius are yours.
Chunky rounded Native CSS
Hi! 👋 My Sunday print edition didn’t arrive this week. Can you help?
Hello! Sorry about that — let me check your delivery route.
Your carrier route in Evanston had a late truck. A replacement copy goes out today.
Great, thanks! Can I also add digital access?
Yes — print subscribers get all-access digital for $1 more a week. Want me to switch it on?
Perfect, please do.
Done! Check your inbox for the sign-in link. Anything else?
That’s all — have a nice day!
You too, and thanks for reading! 😊
Chunky roundedPure CSS — no JavaScript at all. Colors, width and radius are yours.
Neon glow Native CSS
1import { createStore } from './store';
2
3// Keep saved stories in sync across tabs
4const saved = createStore({
5  stories: [],
6  lastSync: null,
7});
8
9export function saveStory(story, section = 'news') {
10  const found = saved.stories.find(s => s.id === story.id);
11  if (found) {
12    found.section = section;
13  } else {
14    saved.stories.push({ ...story, section });
15  }
16  saved.save();
17}
18
19export function unread() {
20  return saved.stories.reduce(
21    (sum, s) => sum + (s.read ? 0 : 1), 0
22  );
23}
24
25window.addEventListener('storage', () => saved.reload());
Neon glowPure CSS — no JavaScript at all. Colors, width and radius are yours.
Square minimal Native CSS

Council passes budget after late-night vote

CHICAGO — The City Council approved a $16.6 billion budget early Wednesday after a session that ran past 1 a.m., ending weeks of tense negotiations.

What changes for residents

The plan holds property taxes flat, adds 200 police officers over two years and funds a pilot for free bus rides on weekends.

Where the money comes from

Officials leaned on higher parking fees and a one-time transfer from reserves, a move the city’s budget office called “a bridge, not a fix.”

The holdouts

Eleven members voted no, saying the deal leaves a $400 million gap for next year. “We are kicking the can,” said Alderman Ray Delgado.

What comes next

The budget takes effect Jan. 1. A public hearing on the transit pilot is set for Nov. 12 at City Hall.

Square minimalPure CSS — no JavaScript at all. Colors, width and radius are yours.
Inset track Native CSS

1. Your account

You are responsible for keeping your login details safe and for all activity under your account. Tell us straight away if you think someone else has used it. This is sample text for the demo and not a real legal document.

2. Subscriptions & billing

Introductory rates last for the period shown at sign-up, then renew at the standard rate. We email you before any price change takes effect. This is sample text for the demo and not a real legal document.

3. Cancellation

You can cancel anytime online. Access continues until the end of the billing period you have already paid for. This is sample text for the demo and not a real legal document.

4. Comments & contributions

Keep comments civil and on topic. Our moderators may remove posts that include personal attacks, spam or misinformation. This is sample text for the demo and not a real legal document.

5. Privacy

We only use your data to run your subscription and, if you agree, to send you newsletters. See our privacy policy for the details. This is sample text for the demo and not a real legal document.

6. Changes to these terms

We may update these terms. The version that applies is the one posted on the date you last renewed. This is sample text for the demo and not a real legal document.

Inset trackPure CSS — no JavaScript at all. Colors, width and radius are yours.
Dark pro Native CSS
1import { createStore } from './store';
2
3// Keep saved stories in sync across tabs
4const saved = createStore({
5  stories: [],
6  lastSync: null,
7});
8
9export function saveStory(story, section = 'news') {
10  const found = saved.stories.find(s => s.id === story.id);
11  if (found) {
12    found.section = section;
13  } else {
14    saved.stories.push({ ...story, section });
15  }
16  saved.save();
17}
18
19export function unread() {
20  return saved.stories.reduce(
21    (sum, s) => sum + (s.read ? 0 : 1), 0
22  );
23}
24
25window.addEventListener('storage', () => saved.reload());
Dark proPure CSS — no JavaScript at all. Colors, width and radius are yours.
Glass Native CSS
1The Budget Deal, ExplainedThe Daily Rundown23:42
2Inside the Jobs ReportMarkets Weekly18:05
3A Heat Wave With No EndThe Daily Rundown21:58
4Who Wins the Suburbs?Election Desk31:11
5The New Space RaceScience Friday Notes26:27
6Your Rent, DecodedMoney Matters19:49
7Courtside: Playoff PreviewThe Sports Hour34:22
8What AI Means for Your JobTech Talk28:15
9Fixing the Water PipesLocal Lens17:40
10Weekend ReadsThe Daily Rundown12:33
GlassPure CSS — no JavaScript at all. Colors, width and radius are yours.
Rainbow Native CSS
Hi! 👋 My Sunday print edition didn’t arrive this week. Can you help?
Hello! Sorry about that — let me check your delivery route.
Your carrier route in Evanston had a late truck. A replacement copy goes out today.
Great, thanks! Can I also add digital access?
Yes — print subscribers get all-access digital for $1 more a week. Want me to switch it on?
Perfect, please do.
Done! Check your inbox for the sign-in link. Anything else?
That’s all — have a nice day!
You too, and thanks for reading! 😊
RainbowPure CSS — no JavaScript at all. Colors, width and radius are yours.
Striped Native CSS

Council passes budget after late-night vote

CHICAGO — The City Council approved a $16.6 billion budget early Wednesday after a session that ran past 1 a.m., ending weeks of tense negotiations.

What changes for residents

The plan holds property taxes flat, adds 200 police officers over two years and funds a pilot for free bus rides on weekends.

Where the money comes from

Officials leaned on higher parking fees and a one-time transfer from reserves, a move the city’s budget office called “a bridge, not a fix.”

The holdouts

Eleven members voted no, saying the deal leaves a $400 million gap for next year. “We are kicking the can,” said Alderman Ray Delgado.

What comes next

The budget takes effect Jan. 1. A public hearing on the transit pilot is set for Nov. 12 at City Hall.

StripedPure CSS — no JavaScript at all. Colors, width and radius are yours.
Outline Native CSS

1. Your account

You are responsible for keeping your login details safe and for all activity under your account. Tell us straight away if you think someone else has used it. This is sample text for the demo and not a real legal document.

2. Subscriptions & billing

Introductory rates last for the period shown at sign-up, then renew at the standard rate. We email you before any price change takes effect. This is sample text for the demo and not a real legal document.

3. Cancellation

You can cancel anytime online. Access continues until the end of the billing period you have already paid for. This is sample text for the demo and not a real legal document.

4. Comments & contributions

Keep comments civil and on topic. Our moderators may remove posts that include personal attacks, spam or misinformation. This is sample text for the demo and not a real legal document.

5. Privacy

We only use your data to run your subscription and, if you agree, to send you newsletters. See our privacy policy for the details. This is sample text for the demo and not a real legal document.

6. Changes to these terms

We may update these terms. The version that applies is the one posted on the date you last renewed. This is sample text for the demo and not a real legal document.

OutlinePure CSS — no JavaScript at all. Colors, width and radius are yours.
Candy 3D Native CSS
1The Budget Deal, ExplainedThe Daily Rundown23:42
2Inside the Jobs ReportMarkets Weekly18:05
3A Heat Wave With No EndThe Daily Rundown21:58
4Who Wins the Suburbs?Election Desk31:11
5The New Space RaceScience Friday Notes26:27
6Your Rent, DecodedMoney Matters19:49
7Courtside: Playoff PreviewThe Sports Hour34:22
8What AI Means for Your JobTech Talk28:15
9Fixing the Water PipesLocal Lens17:40
10Weekend ReadsThe Daily Rundown12:33
Candy 3DPure CSS — no JavaScript at all. Colors, width and radius are yours.
Reveal on hover Native CSS

Council passes budget after late-night vote

CHICAGO — The City Council approved a $16.6 billion budget early Wednesday after a session that ran past 1 a.m., ending weeks of tense negotiations.

What changes for residents

The plan holds property taxes flat, adds 200 police officers over two years and funds a pilot for free bus rides on weekends.

Where the money comes from

Officials leaned on higher parking fees and a one-time transfer from reserves, a move the city’s budget office called “a bridge, not a fix.”

The holdouts

Eleven members voted no, saying the deal leaves a $400 million gap for next year. “We are kicking the can,” said Alderman Ray Delgado.

What comes next

The budget takes effect Jan. 1. A public hearing on the transit pilot is set for Nov. 12 at City Hall.

Reveal on hoverInvisible until the pointer is over the box.
Hidden (still scrolls) Native CSS
Hi! 👋 My Sunday print edition didn’t arrive this week. Can you help?
Hello! Sorry about that — let me check your delivery route.
Your carrier route in Evanston had a late truck. A replacement copy goes out today.
Great, thanks! Can I also add digital access?
Yes — print subscribers get all-access digital for $1 more a week. Want me to switch it on?
Perfect, please do.
Done! Check your inbox for the sign-in link. Anything else?
That’s all — have a nice day!
You too, and thanks for reading! 😊
Hidden (still scrolls)For carousels and kiosks — no bar at all, scrolling still works.
REAL WEBSITES

Scrollable panels are everywhere — chats, code, terms, product rows, playlists. Each one below is a single widget set to “Only this widget’s showcase box”.

shophelp deskcheckoutdocsmusicmagazine
Online shop · product rowA horizontal row of products with a pill bar underneath — drag it or shift-scroll.
Support · Mia Custom engine
Hi! 👋 My Sunday print edition didn’t arrive this week. Can you help?
Hello! Sorry about that — let me check your delivery route.
Your carrier route in Evanston had a late truck. A replacement copy goes out today.
Great, thanks! Can I also add digital access?
Yes — print subscribers get all-access digital for $1 more a week. Want me to switch it on?
Perfect, please do.
Done! Check your inbox for the sign-in link. Anything else?
That’s all — have a nice day!
You too, and thanks for reading! 😊
Help desk · live chatA hairline bar that hides itself when the visitor stops scrolling.
Terms of sale Custom engine

1. Your account

You are responsible for keeping your login details safe and for all activity under your account. Tell us straight away if you think someone else has used it. This is sample text for the demo and not a real legal document.

2. Subscriptions & billing

Introductory rates last for the period shown at sign-up, then renew at the standard rate. We email you before any price change takes effect. This is sample text for the demo and not a real legal document.

3. Cancellation

You can cancel anytime online. Access continues until the end of the billing period you have already paid for. This is sample text for the demo and not a real legal document.

4. Comments & contributions

Keep comments civil and on topic. Our moderators may remove posts that include personal attacks, spam or misinformation. This is sample text for the demo and not a real legal document.

5. Privacy

We only use your data to run your subscription and, if you agree, to send you newsletters. See our privacy policy for the details. This is sample text for the demo and not a real legal document.

6. Changes to these terms

We may update these terms. The version that applies is the one posted on the date you last renewed. This is sample text for the demo and not a real legal document.

Checkout · terms & conditionsMarkers for every clause and the clause name in the tooltip, so buyers know where they are.
cart.js Native CSS
1import { createStore } from './store';
2
3// Keep saved stories in sync across tabs
4const saved = createStore({
5  stories: [],
6  lastSync: null,
7});
8
9export function saveStory(story, section = 'news') {
10  const found = saved.stories.find(s => s.id === story.id);
11  if (found) {
12    found.section = section;
13  } else {
14    saved.stories.push({ ...story, section });
15  }
16  saved.save();
17}
18
19export function unread() {
20  return saved.stories.reduce(
21    (sum, s) => sum + (s.read ? 0 : 1), 0
22  );
23}
24
25window.addEventListener('storage', () => saved.reload());
Docs · code sampleNative CSS neon on a dark code block — no script needed.
Weekend mix Custom engine
1The Budget Deal, ExplainedThe Daily Rundown23:42
2Inside the Jobs ReportMarkets Weekly18:05
3A Heat Wave With No EndThe Daily Rundown21:58
4Who Wins the Suburbs?Election Desk31:11
5The New Space RaceScience Friday Notes26:27
6Your Rent, DecodedMoney Matters19:49
7Courtside: Playoff PreviewThe Sports Hour34:22
8What AI Means for Your JobTech Talk28:15
9Fixing the Water PipesLocal Lens17:40
10Weekend ReadsThe Daily Rundown12:33
Music app · playlistGlass bar on a dark player that fades out when idle.
The small details Custom engine

Council passes budget after late-night vote

CHICAGO — The City Council approved a $16.6 billion budget early Wednesday after a session that ran past 1 a.m., ending weeks of tense negotiations.

What changes for residents

The plan holds property taxes flat, adds 200 police officers over two years and funds a pilot for free bus rides on weekends.

Where the money comes from

Officials leaned on higher parking fees and a one-time transfer from reserves, a move the city’s budget office called “a bridge, not a fix.”

The holdouts

Eleven members voted no, saying the deal leaves a $400 million gap for next year. “We are kicking the can,” said Alderman Ray Delgado.

What comes next

The budget takes effect Jan. 1. A public hearing on the transit pilot is set for Nov. 12 at City Hall.

Magazine · long readProgress track on the left with heading markers and “section · percent” tooltip.

The chat, products, songs and terms in these boxes are sample content for the demo.

106 elements for news, Custom Scrollbar included.