refactor(scrollbar): mv id out of styled-file to view layer

Author: mydearxym

containers/Doraemon/ResultsList.js

@@ -30,7 +30,7 @@ const HintIcon = ({ index, active, cur, length }) => {
 }
 
 const ResultsList = ({ searchValue, searchThread, suggestions, activeRaw }) => (
-  <Wrapper>
+  <Wrapper id="suggestion-scroller">
     <SuggestionWrapper empty={suggestions.length === 0}>
       {suggestions.map((suggestion, i) => (
         <InfoBar

containers/Doraemon/styles/results_list.js

@@ -3,8 +3,8 @@ import styled from 'styled-components'
 import Img from '@components/Img'
 import { theme, animate, cs } from '@utils'
 
-export const Wrapper = styled.div.attrs(() => ({
-  id: 'suggestion-scroller',
+export const Wrapper = styled.div.attrs(({ id }) => ({
+  id,
 }))`
   width: 100%;
   overflow: hidden;

containers/Sidebar/MenuList.js

@@ -23,7 +23,7 @@ const MenuList = SortableContainer(
 
     return (
       <Wrapper>
-        <ScrollWrapper>
+        <ScrollWrapper id="sidebar-scroller">
           {homeCommunities.map(item => (
             <MenuBar
               key={item.raw}

containers/Sidebar/styles/menu_list.js

@@ -10,10 +10,8 @@ export const Wrapper = styled.div`
   // overflow-y: scroll;
   transition: left 0.2s;
 `
-export const ScrollWrapper = styled.div.attrs(() => ({
-  id: 'sidebar-scroller',
+export const ScrollWrapper = styled.div.attrs(({ id }) => ({
+  id,
 }))`
-  // max-height: calc(100% - 20px);
-  // height 500px;
   height: calc(100% - 20px);
 `