Skip to content

Improve window scroll #1112

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 2, 2025
Merged

Improve window scroll #1112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 36 additions & 4 deletions src/browser/html/window.zig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,8 @@ pub const Window = struct {
performance: Performance,
screen: Screen = .{},
css: Css = .{},
scroll_x: u32 = 0,
scroll_y: u32 = 0,
onload_callback: ?Function = null,

pub fn create(target: ?[]const u8, navigator: ?Navigator) !Window {
Expand Down Expand Up @@ -388,12 +390,20 @@ pub const Window = struct {
const Opts = struct {
top: i32,
left: i32,
behavior: []const u8,
behavior: []const u8 = "",
};
};
pub fn _scrollTo(self: *Window, opts: ScrollToOpts, y: ?u32) !void {
_ = opts;
_ = y;
pub fn _scrollTo(self: *Window, opts: ScrollToOpts, y: ?i32) !void {
switch (opts) {
.x => |x| {
self.scroll_x = @intCast(@max(x, 0));
self.scroll_y = @intCast(@max(0, y orelse 0));
},
.opts => |o| {
self.scroll_y = @intCast(@max(0, o.top));
self.scroll_x = @intCast(@max(0, o.left));
},
}

{
const scroll_event = try parser.eventCreate();
Expand All @@ -417,6 +427,28 @@ pub const Window = struct {
);
}
}
pub fn _scroll(self: *Window, opts: ScrollToOpts, y: ?i32) !void {
// just an alias for scrollTo
return self._scrollTo(opts, y);
}

pub fn get_scrollX(self: *const Window) u32 {
return self.scroll_x;
}

pub fn get_scrollY(self: *const Window) u32 {
return self.scroll_y;
}

pub fn get_pageXOffset(self: *const Window) u32 {
// just an alias for scrollX
return self.get_scrollX();
}

pub fn get_pageYOffset(self: *const Window) u32 {
// just an alias for scrollY
return self.get_scrollY();
}

// libdom's document doesn't have a parent, which is correct, but
// breaks the event bubbling that happens for many events from
Expand Down
31 changes: 30 additions & 1 deletion src/tests/window/window.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<script src="../testing.js"></script>
<body></body>
<body style=height:4000px;width:4000px></body>
<script id=aliases>
testing.expectEqual(window, window.self);
testing.expectEqual(window, window.parent);
Expand Down Expand Up @@ -82,12 +82,41 @@
<script id=scroll>
let scroll = false;
let scrollend = false

window.addEventListener('scroll', () => {scroll = true});
document.addEventListener('scrollend', () => {scrollend = true});
window.scrollTo(0, 0);
testing.expectEqual(0, scrollX);
testing.expectEqual(0, pageXOffset);
testing.expectEqual(0, scrollY);
testing.expectEqual(0, pageYOffset);

testing.expectEqual(true, scroll);
testing.expectEqual(true, scrollend);

window.scrollTo(10, 20);
testing.expectEqual(10, scrollX);
testing.expectEqual(10, pageXOffset);
testing.expectEqual(20, scrollY);
testing.expectEqual(20, pageYOffset);

window.scrollTo(-10, -20);
testing.expectEqual(0, scrollX);
testing.expectEqual(0, pageXOffset);
testing.expectEqual(0, scrollY);
testing.expectEqual(0, pageYOffset);

window.scrollTo({top: 30, left: 40});
testing.expectEqual(40, scrollX);
testing.expectEqual(40, pageXOffset);
testing.expectEqual(30, scrollY);
testing.expectEqual(30, pageYOffset);

window.scrollTo({top: -30, left: -40});
testing.expectEqual(0, scrollX);
testing.expectEqual(0, pageXOffset);
testing.expectEqual(0, scrollY);
testing.expectEqual(0, pageYOffset);
</script>

<script id=queueMicroTask>
Expand Down