Skip to content

Commit fe5e61a

Browse files
committed
Add scrollTo, scrollBy, scrollIntoView
We add [`Element.scrollTo`][1], [`Element.scrollBy`][2], and [`Element.scrollIntoView`][3]. [1]: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo [2]: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollBy [3]: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
1 parent ae891c5 commit fe5e61a

File tree

2 files changed

+98
-0
lines changed

2 files changed

+98
-0
lines changed

src/Web/DOM/Element.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,33 @@ exports.setScrollLeft = function (scrollLeft) {
133133
};
134134
};
135135

136+
exports._scrollTo = function (scrollToOptions) {
137+
return function (node) {
138+
return function () {
139+
node.scrollTo(scrollToOptions);
140+
return {};
141+
};
142+
};
143+
};
144+
145+
exports._scrollBy = function (scrollToOptions) {
146+
return function (node) {
147+
return function () {
148+
node.scrollBy(scrollToOptions);
149+
return {};
150+
};
151+
};
152+
};
153+
154+
exports._scrollIntoView = function (scrollIntoViewOptions) {
155+
return function (node) {
156+
return function () {
157+
node.scrollIntoView(scrollIntoViewOptions);
158+
return {};
159+
};
160+
};
161+
};
162+
136163
exports.scrollWidth = function (el) {
137164
return function () {
138165
return el.scrollWidth;

src/Web/DOM/Element.purs

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@ module Web.DOM.Element
2929
, setScrollTop
3030
, scrollLeft
3131
, setScrollLeft
32+
, ScrollBehavior
33+
, ScrollAlignment
34+
, scrollBy
35+
, ScrollToOptions
36+
, scrollIntoView
37+
, ScrollIntoViewOptions
3238
, scrollWidth
3339
, scrollHeight
3440
, clientTop
@@ -121,6 +127,71 @@ foreign import setScrollTop :: Number -> Element -> Effect Unit
121127
foreign import scrollLeft :: Element -> Effect Number
122128
foreign import setScrollLeft :: Number -> Element -> Effect Unit
123129

130+
data ScrollBehavior = Auto | Smooth
131+
132+
stringScrollBehavior :: ScrollBehavior -> String
133+
stringScrollBehavior Auto = "Auto"
134+
stringScrollBehavior Smooth = "Smooth"
135+
136+
type ScrollToOptions =
137+
{ top :: Number
138+
, left :: Number
139+
, behavior :: ScrollBehavior
140+
}
141+
142+
type ScrollToOptions_ =
143+
{ top :: Number
144+
, left :: Number
145+
, behavior :: String
146+
}
147+
148+
foreign import _scrollTo :: Element -> ScrollToOptions_ -> Effect Unit
149+
150+
scrollTo :: Element -> ScrollToOptions -> Effect Unit
151+
scrollTo elem _opts = _scrollTo elem opts
152+
where
153+
opts = let { top,left, behavior } = _opts
154+
in { top, left, behavior: stringScrollBehavior behavior }
155+
156+
foreign import _scrollBy :: Element -> ScrollToOptions_ -> Effect Unit
157+
158+
scrollBy :: Element -> ScrollToOptions -> Effect Unit
159+
scrollBy elem _opts = _scrollBy elem opts
160+
where
161+
opts = let { top,left, behavior } = _opts
162+
in { top, left, behavior: stringScrollBehavior behavior }
163+
164+
data ScrollAlignment = Start | Center | End | Nearest
165+
166+
stringScrollAlignment :: ScrollAlignment -> String
167+
stringScrollAlignment Start = "Start"
168+
stringScrollAlignment Center = "Center"
169+
stringScrollAlignment End = "End"
170+
stringScrollAlignment Nearest = "Nearest"
171+
172+
type ScrollIntoViewOptions =
173+
{ behavior :: ScrollBehavior
174+
, block :: ScrollAlignment
175+
, inline :: ScrollAlignment
176+
}
177+
178+
type ScrollIntoViewOptions_ =
179+
{ behavior :: String
180+
, block :: String
181+
, inline :: String
182+
}
183+
184+
foreign import _scrollIntoView :: Element -> ScrollIntoViewOptions_ -> Effect Unit
185+
186+
scrollIntoView :: Element -> ScrollIntoViewOptions -> Effect Unit
187+
scrollIntoView elem _opts = _scrollIntoView elem opts
188+
where
189+
opts = let { behavior, block, inline } = _opts
190+
in { behavior: stringScrollBehavior behavior
191+
, block: stringScrollAlignment block
192+
, inline: stringScrollAlignment inline
193+
}
194+
124195
foreign import scrollWidth :: Element -> Effect Number
125196
foreign import scrollHeight :: Element -> Effect Number
126197
foreign import clientTop :: Element -> Effect Number

0 commit comments

Comments
 (0)