拖移

package.json

@@ -13,6 +13,7 @@
     "react-dom": "^16.13.1",
     "react-ga": "^3.0.0",
     "react-github-btn": "^1.2.0",
+    "react-indiana-drag-scroll": "^1.6.1",
     "react-redux": "^7.2.0",
     "react-scripts": "3.4.1",
     "redux": "^4.0.5"

src/components/app/PartStyles.js

@@ -2,6 +2,7 @@ import React, {useEffect, useState} from 'react';
 import './App.css';
 import StyleListViewer from "../../containers/style/StyleListViewer";
 import {isPC} from "../../utils/navigatorUtils";
+import ScrollContainer from 'react-indiana-drag-scroll'
 
 const PartStyles = ({ setParamInfo }) => {
     const [loaded, setLoaded] = useState(false);
@@ -19,9 +20,9 @@ const PartStyles = ({ setParamInfo }) => {
                 {isPC() ? <div className="Qr-style-hint">按住 shift 滚动</div> : null}
             </div>
         </div>
-        <div className="Qr-s" style={{visibility: loaded ? "visible" :"hidden"}}>
+        <ScrollContainer className="Qr-s" style={{visibility: loaded ? "visible" :"hidden"}}>
             {styleList}
-        </div>
+        </ScrollContainer>
     </div>)
 }
 

yarn.lock

@@ -2867,6 +2867,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.npm.taobao.org/classnames/download/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha1-Q5Nb/90pHzJtrQogUwmzjQD2UM4=
+
 clean-css@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npm.taobao.org/clean-css/download/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -3535,6 +3540,11 @@ data-urls@^1.0.0, data-urls@^1.1.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
+debounce@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npm.taobao.org/debounce/download/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
+  integrity sha1-RKVAq8DqmUMBjcDqqVzOh/Zc0TE=
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -3850,6 +3860,11 @@ duplexify@^3.4.2, duplexify@^3.6.0:
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
+easy-bem@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.npm.taobao.org/easy-bem/download/easy-bem-1.0.2.tgz#3f759158c045465744900aa26ba8bd7d88d7a969"
+  integrity sha1-P3WRWMBFRldEkAqia6i9fYjXqWk=
+
 ecc-jsbn@~0.1.1:
   version "0.1.2"
   resolved "https://registry.npm.taobao.org/ecc-jsbn/download/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
@@ -8715,6 +8730,15 @@ react-github-btn@^1.2.0:
   dependencies:
     github-buttons "^2.8.0"
 
+react-indiana-drag-scroll@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.npm.taobao.org/react-indiana-drag-scroll/download/react-indiana-drag-scroll-1.6.1.tgz#9b1838b03ae5eea38cf35fc1da22030cc1c061a1"
+  integrity sha1-mxg4sDrl7qOM81/B2iIDDMHAYaE=
+  dependencies:
+    classnames "^2.2.6"
+    debounce "^1.2.0"
+    easy-bem "^1.0.0"
+
 react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0:
   version "16.13.1"
   resolved "https://registry.npm.taobao.org/react-is/download/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"