Skip to content
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

use CSS transitions and transforms in horizontal scroll #5193

Merged
merged 9 commits into from
Oct 12, 2021
Merged

use CSS transitions and transforms in horizontal scroll #5193

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
32873d3
add parts to horizontal scroller template
radium-v Sep 3, 2021
5538019
move resize-observer and intersection service to utilities
radium-v Sep 15, 2021
a7d42ca
ccalculate framesPerSecond with requestAnimationFrame in horizontal-s…
radium-v Sep 15, 2021
38d6831
use reducer for updateScrollStops in horizontal-scroll
radium-v Sep 15, 2021
9d86c68
use optional chaining and conditional operators in horizontal-scroll
radium-v Sep 15, 2021
abd619c
ensure fps is determined before setting stepcount
radium-v Sep 30, 2021
6109fd7
use transforms and transitions instead
radium-v Oct 12, 2021
3a08296
Change files
radium-v Sep 15, 2021
b6719f4
merge move method into scrollToPosition
radium-v Oct 12, 2021
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
Next Next commit
add parts to horizontal scroller template
  • Loading branch information
@radium-v
radium-v committed Oct 12, 2021
commit 32873d31be939ab9237c36d27e82c1ebffb4b7e6
9 changes: 5 additions & 4 deletions packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.template.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,14 @@ export const horizontalScrollTemplate: FoundationElementTemplate<
@keyup="${(x, c) => x.keyupHandler(c.event as KeyboardEvent)}"
>
${startSlotTemplate(context, definition)}
<div class="scroll-area">
<div class="scroll-area" part="scroll-area">
<div
class="scroll-view"
part="scroll-view"
@scroll="${x => x.scrolled()}"
${ref("scrollContainer")}
>
<div class="content-container">
<div class="content-container" part="content-container">
<slot
${slotted({
property: "scrollItems",
Expand All @@ -45,7 +46,7 @@ export const horizontalScrollTemplate: FoundationElementTemplate<
part="scroll-prev"
${ref("previousFlipperContainer")}
>
<div class="scroll-action">
<div class="scroll-action" part="scroll-action-previous">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great - thank you!

<slot name="previous-flipper">
${definition.previousFlipper instanceof Function
? definition.previousFlipper(context, definition)
Expand All @@ -58,7 +59,7 @@ export const horizontalScrollTemplate: FoundationElementTemplate<
part="scroll-next"
${ref("nextFlipperContainer")}
>
<div class="scroll-action">
<div class="scroll-action" part="scroll-action-next">
<slot name="next-flipper">
${definition.nextFlipper instanceof Function
? definition.nextFlipper(context, definition)
Expand Down