-
-
- {loading && this.renderLoading()}
- {!loading && sets && sets.map((data,idx) => data && (! visibility || (! data.emoji && ! data.is_favorites)) && createElement(
- data.emoji ? t.EmojiSection : t.MenuSection,
- {
- key: data.key,
- idx,
- data,
- ffz_sub_data: this.state.ffz_sub_data,
- emote_modifiers: this.state.emote_modifiers,
- animated: this.state.animated,
- combineTabs: this.state.combineTabs,
- showHeading: this.state.showHeading,
- filtered: this.state.filtered,
- visibility_control: visibility,
- onClickToken: this.props.onClickToken,
- addSection: this.addSection,
- removeSection: this.removeSection,
- startObserving: this.startObserving,
- stopObserving: this.stopObserving
- }
- ))}
- {! loading && (! sets || ! sets.length) && this.renderEmpty()}
-
-
+ {loading && this.renderLoading()}
+ {!loading && sets && sets.map((data,idx) => data && (! visibility || (! data.emoji && ! data.is_favorites)) && createElement(
+ data.emoji ? t.EmojiSection : t.MenuSection,
+ {
+ key: data.key,
+ idx,
+ data,
+ ffz_sub_data: this.state.ffz_sub_data,
+ emote_modifiers: this.state.emote_modifiers,
+ animated: this.state.animated,
+ combineTabs: this.state.combineTabs,
+ showHeading: this.state.showHeading,
+ filtered: this.state.filtered,
+ visibility_control: visibility,
+ onClickToken: this.props.onClickToken,
+ addSection: this.addSection,
+ removeSection: this.removeSection,
+ startObserving: this.startObserving,
+ stopObserving: this.stopObserving
+ }
+ ))}
+ {! loading && (! sets || ! sets.length) && this.renderEmpty()}
diff --git a/src/sites/twitch-twilight/modules/chat/scroller.js b/src/sites/twitch-twilight/modules/chat/scroller.js
index 28baa649..9db144e3 100644
--- a/src/sites/twitch-twilight/modules/chat/scroller.js
+++ b/src/sites/twitch-twilight/modules/chat/scroller.js
@@ -562,10 +562,11 @@ export default class Scroller extends Module {
cls.prototype.ffz_updateActing = function() {
this._ffz_key_frame_acting = null;
- if ( ! this.scrollRef?.root )
+ const root = t.fine.getChildNode(this);
+ if ( ! root )
return;
- this.scrollRef.root.dataset.acting = this.ffz_acting;
+ root.dataset.acting = this.ffz_acting;
}
cls.prototype.ffzUpdateKeyTags = function() {
@@ -579,13 +580,14 @@ export default class Scroller extends Module {
if ( ! t.use_keys && this.ffz_use_keys === t.use_keys )
return;
- if ( ! this.scrollRef?.root )
+ const root = t.fine.getChildNode(this);
+ if ( ! root )
return;
this.ffz_use_keys = t.use_keys;
- this.scrollRef.root.classList.toggle('ffz--keys', t.use_keys);
+ root.classList.toggle('ffz--keys', t.use_keys);
- const ds = this.scrollRef.root.dataset;
+ const ds = root.dataset;
if ( ! t.use_keys ) {
delete ds.alt;
diff --git a/src/sites/twitch-twilight/styles/chat.scss b/src/sites/twitch-twilight/styles/chat.scss
index 22281c1a..d5da932f 100644
--- a/src/sites/twitch-twilight/styles/chat.scss
+++ b/src/sites/twitch-twilight/styles/chat.scss
@@ -538,3 +538,9 @@
}
}
}
+
+.ffz-emote-menu--scroll-area {
+ overflow-y: auto;
+ overflow-x: hidden;
+ scrollbar-width: thin;;
+}
diff --git a/src/std-components/simplebar.vue b/src/std-components/simplebar.vue
index efe15e08..95ba4dae 100644
--- a/src/std-components/simplebar.vue
+++ b/src/std-components/simplebar.vue
@@ -2,17 +2,9 @@
@@ -29,27 +21,7 @@ export default {
type: Number,
default: 10
}
- },
-
- mounted() {
- const scroller = this.$refs.scroller;
- if (!scroller || ! window.ffzSimplebar || scroller.SimpleBar)
- return;
-
- new ffzSimplebar(scroller, ffzSimplebar.getElOptions(scroller));
- },
-
- methods: {
- onScroll() {
- // We do this to avoid the scroll position getting screwed up on
- // an element that should never scroll. Thanks, web browsers.
- const scroller = this.$refs.scroller;
- if ( ! scroller || scroller.scrollTop == 0 )
- return;
-
- scroller.scrollTop = 0;
- }
}
}
-
\ No newline at end of file
+
diff --git a/styles/main.scss b/styles/main.scss
index 8ce452a5..c81b16d5 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -180,3 +180,7 @@
.ffz-aspect--align-bottom > :not(.ffz-aspect__spacer) {
bottom: 0;
}
+
+.ffz-scrollable {
+ scrollbar-width: thin;
+}