Skip to content

Commit

Permalink
feat(chore): prevent overscrolling
Browse files Browse the repository at this point in the history
On mobile devices when scrolling inside a dropdown menu, scrolling table, segment, container, etc. reaching the top of the scrolling area, the browsers will reload the page "pull to refresh".

This PR prevents such behavior on selected components, where an accidental refresh shouldnt be wanted.
  • Loading branch information
lubber-de authored Dec 4, 2022
1 parent 8a8d841 commit 3979742
Show file tree
Hide file tree
Showing 12 changed files with 37 additions and 34 deletions.
2 changes: 2 additions & 0 deletions src/definitions/collections/table.less
Original file line number Diff line number Diff line change
Expand Up @@ -399,6 +399,7 @@
.ui.scrolling.table > tbody {
display: block;
overflow-y: scroll;
overscroll-behavior: @overscrollBehavior;
scrollbar-width: thin; /* Firefox */
& > tr {
display: table;
Expand Down Expand Up @@ -498,6 +499,7 @@
.ui.overflowing.table {
display: block;
overflow: auto;
overscroll-behavior: @overscrollBehavior;
}
@media only screen and (min-width: @tabletBreakpoint) {
& when (@variationTableOverflowingShort) {
Expand Down
1 change: 1 addition & 0 deletions src/definitions/elements/container.less
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,7 @@
---------------*/
.ui.scrolling.container {
overflow: auto;
overscroll-behavior: @overscrollBehavior;
}
@media only screen and (max-width : @largestMobileScreen) {
& when (@variationContainerScrollingShort) {
Expand Down
1 change: 1 addition & 0 deletions src/definitions/elements/segment.less
Original file line number Diff line number Diff line change
Expand Up @@ -793,6 +793,7 @@
---------------*/
.ui.scrolling.segment {
overflow: auto;
overscroll-behavior: @overscrollBehavior;
}
@media only screen and (max-width : @largestMobileScreen) {
& when (@variationSegmentScrollingShort) {
Expand Down
13 changes: 5 additions & 8 deletions src/definitions/modules/dropdown.less
Original file line number Diff line number Diff line change
Expand Up @@ -448,6 +448,7 @@ select.ui.dropdown {
.ui.selection.dropdown .menu {
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: @overscrollBehavior;
backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
border-top-width: 0 !important;
Expand Down Expand Up @@ -765,6 +766,7 @@ select.ui.dropdown {
.ui.search.dropdown .menu {
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: @overscrollBehavior;
backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
}
Expand Down Expand Up @@ -1319,11 +1321,7 @@ select.ui.dropdown {
.ui.dropdown .scrolling.menu {
overflow-x: hidden;
overflow-y: auto;
}

.ui.scrolling.dropdown .menu {
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: @overscrollBehavior;
backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
min-width: 100% !important;
Expand All @@ -1332,13 +1330,10 @@ select.ui.dropdown {

.ui.dropdown .scrolling.menu {
position: static;
overflow-y: auto;
border: none;
box-shadow: none !important;
border-radius: 0 0 @floatingMenuBorderRadius @floatingMenuBorderRadius !important;
margin: 0 !important;
min-width: 100% !important;
width: auto !important;
border-top: @menuBorder;
}
.ui.scrolling.dropdown .menu .item.item.item,
Expand Down Expand Up @@ -1500,6 +1495,7 @@ select.ui.dropdown {
.ui.simple.selection.dropdown > .menu > .item:active > .menu,
.ui.simple.selection.dropdown .menu .item:hover > .menu {
overflow: auto;
overscroll-behavior: @overscrollBehavior;
}
}
.ui.simple.dropdown > .menu > .item:active > .left.menu,
Expand Down Expand Up @@ -1528,6 +1524,7 @@ select.ui.dropdown {
.ui.simple.scrolling.dropdown:hover > .menu {
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: @overscrollBehavior;
}
}
}
Expand Down
27 changes: 15 additions & 12 deletions src/definitions/modules/flyout.less
Original file line number Diff line number Diff line change
Expand Up @@ -100,22 +100,25 @@
line-height: @contentLineHeight;
padding: @contentPadding;
background: @contentBackground;
&.scrolling when(@variationFlyoutScrolling) {
overflow: auto;
overscroll-behavior: @overscrollBehavior;
}
}
.ui.flyout.left > .content,
.ui.flyout.right > .content {
min-height: @contentMinHeight;
}
& when(@variationFlyoutScrolling) {
.ui.flyout.left > .scrolling.content,
.ui.flyout.right > .scrolling.content {
max-height: @scrollingContentMaxHeight;
}

.ui.flyout.left > .scrolling.content,
.ui.flyout.right > .scrolling.content{
max-height: @scrollingContentMaxHeight;
overflow: auto;
}

.ui.flyout.top > .scrolling.content,
.ui.flyout.bottom > .scrolling.content{
max-height: @scrollingContentMaxHeightTopBottom;
overflow: auto;
.ui.flyout.top > .scrolling.content,
.ui.flyout.bottom > .scrolling.content {
max-height: @scrollingContentMaxHeightTopBottom;
}
}

& when (@variationFlyoutActions) {
Expand Down Expand Up @@ -520,7 +523,7 @@ body.pushable > .pusher {
--------------------*/

& when (@variationFlyoutColumnWidth) {

/* Sizing Combinations */

.ui[class*="one wide"].flyout:not(.fullscreen) {
Expand Down Expand Up @@ -637,7 +640,7 @@ body.pushable > .pusher {
.ui.visible.overlay.flyout {
transform: translate3d(0%, 0, 0);
}

/* End - Pusher */
.ui.visible.overlay.flyout ~ .fixed,
.ui.visible.overlay.flyout ~ .pusher {
Expand Down
3 changes: 3 additions & 0 deletions src/definitions/modules/modal.less
Original file line number Diff line number Diff line change
Expand Up @@ -453,6 +453,7 @@
}
.scrolling.dimmable.dimmed > .dimmer {
overflow: auto;
overscroll-behavior: @overscrollBehavior;
-webkit-overflow-scrolling: touch;
}
.modals.dimmer .ui.scrolling.modal:not(.fullscreen) {
Expand All @@ -467,6 +468,7 @@
/* Undetached Scrolling */
.scrolling.undetached.dimmable.dimmed {
overflow: auto;
overscroll-behavior: @overscrollBehavior;
-webkit-overflow-scrolling: touch;
}
.scrolling.undetached.dimmable.dimmed > .dimmer {
Expand All @@ -482,6 +484,7 @@
.ui.modal > .scrolling.content {
max-height: @scrollingContentMaxHeight;
overflow: auto;
overscroll-behavior: @overscrollBehavior;
}
}

Expand Down
1 change: 1 addition & 0 deletions src/definitions/modules/search.less
Original file line number Diff line number Diff line change
Expand Up @@ -403,6 +403,7 @@
.ui.search.short > .results {
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: @overscrollBehavior;
backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
}
Expand Down
1 change: 1 addition & 0 deletions src/definitions/modules/sidebar.less
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
border-radius: 0 !important;
margin: 0 !important;
overflow-y: auto !important;
overscroll-behavior: @overscrollBehavior;
z-index: @topLayer;
}

Expand Down
7 changes: 0 additions & 7 deletions src/themes/default/elements/container.variables
Original file line number Diff line number Diff line change
Expand Up @@ -51,13 +51,6 @@
@computerVeryRelaxedGridWidth: e(%("calc(%d + %d)", @computerWidth, @veryRelaxedGridGutterWidth));
@largeMonitorVeryRelaxedGridWidth: e(%("calc(%d + %d)", @largeMonitorWidth, @veryRelaxedGridGutterWidth));

/*-------------------
Scrolling
--------------------*/
@scrollingMobileMaxHeight: 15em;
@scrollingTabletMaxHeight: 18em;
@scrollingComputerMaxHeight: 24em;
@scrollingWidescreenMaxHeight: 30em;

/*-------------------
Types
Expand Down
7 changes: 0 additions & 7 deletions src/themes/default/elements/segment.variables
Original file line number Diff line number Diff line change
Expand Up @@ -154,10 +154,3 @@
;
@tertiaryInvertedColor: @invertedMutedTextColor;

/*-------------------
Scrolling
--------------------*/
@scrollingMobileMaxHeight: 15em;
@scrollingTabletMaxHeight: 18em;
@scrollingComputerMaxHeight: 24em;
@scrollingWidescreenMaxHeight: 30em;
7 changes: 7 additions & 0 deletions src/themes/default/globals/site.variables
Original file line number Diff line number Diff line change
Expand Up @@ -275,6 +275,13 @@
@trackInvertedBackgroundHex: #323232;
@thumbInvertedBackgroundHex: #656565;

/* Scrolling */
@scrollingMobileMaxHeight: 15em;
@scrollingTabletMaxHeight: 18em;
@scrollingComputerMaxHeight: 24em;
@scrollingWidescreenMaxHeight: 30em;
@overscrollBehavior: none;

/*-------------------
Highlighted Text
--------------------*/
Expand Down
1 change: 1 addition & 0 deletions src/themes/default/globals/variation.variables
Original file line number Diff line number Diff line change
Expand Up @@ -572,6 +572,7 @@
@variationFlyoutLeft: true;
@variationFlyoutRight: true;
@variationFlyoutOverlay: true;
@variationFlyoutScrolling: true;

/* Modal */
@variationModalInverted: true;
Expand Down

0 comments on commit 3979742

Please sign in to comment.