#101 - bind scroll event, highlight relevent section by tabs

src/components/emoji-selector/emoji-selector.js

@@ -6,7 +6,8 @@ const EmojiSelector = {
   data () {
     return {
       open: false,
-      keyword: ''
+      keyword: '',
+      activeGroup: 'standard'
     }
   },
   methods: {
@@ -17,6 +18,20 @@ const EmojiSelector = {
       const value = emoji.image_url ? `:${emoji.shortcode}:` : emoji.utf
       this.$emit('emoji', ` ${value} `)
       this.open = false
+    },
+    highlight (key) {
+      const ref = this.$refs['group-' + key]
+      const top = ref[0].offsetTop
+      this.$refs['emoji-groups'].scrollTop = top + 1
+      this.activeGroup = key
+    },
+    scrolledGroup (e) {
+      const top = e.target.scrollTop
+      Object.keys(this.emojis).forEach(key => {
+        if (this.$refs['group-' + key][0].offsetTop < top) {
+          this.activeGroup = key
+        }
+      })
     }
   },
   computed: {

src/components/emoji-selector/emoji-selector.vue

@@ -5,7 +5,7 @@
     </span>
     <div class="emoji-dropdown-menu panel panel-default" v-if="open">
       <div class="panel-heading emoji-tabs">
-        <span class="emoji-tabs-item" v-for="(value, key) in emojis" :key="key" :title="value.text">
+        <span class="emoji-tabs-item" :class="{'active': activeGroup === key}" v-for="(value, key) in emojis" :key="key" :title="value.text" @click.prevent="highlight(key)">
           <i :class="value.icon"></i>
         </span>
       </div>
@@ -13,9 +13,9 @@
         <div class="emoji-search">
           <input type="text" class="form-control" v-model="keyword" />
         </div>
-        <div class="emoji-groups">
+        <div class="emoji-groups" ref="emoji-groups" @scroll="scrolledGroup">
           <div v-for="(value, key) in emojis" :key="key" class="emoji-group">
-            <h6 class="emoji-group-title">{{value.text}}</h6>
+            <h6 class="emoji-group-title" :ref="'group-' + key">{{value.text}}</h6>
             <span
               v-for="emoji in value.emojis"
               :key="key + emoji.shortcode"
@@ -78,7 +78,7 @@
     &-item {
       padding: 0 5px;
 
-      &:first-child, &.active {
+      &.active {
         border-bottom: 4px solid;
 
         i {
@@ -96,6 +96,7 @@
   &-groups {
     flex: 1 1 1px;
     overflow: auto;
+    position: relative;
   }
 
   &-group {