changes to collection scrolling

src/components/_mobile/collection/index.tsx

@@ -103,6 +103,7 @@ export default function Collection (_props) {
 
   const handlePage = (event: React.ChangeEvent<unknown>, value: number) => {
     sp(value);
+    window.scroll(0, 0);
   };
 
   const handleExt = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -110,7 +111,7 @@ export default function Collection (_props) {
     saveSettings({ extended: event.target.checked.toString() });
   };
 
-  const hanldeStats = (event: SelectChangeEvent<statsType>) => {
+  const handleStats = (event: SelectChangeEvent<statsType>) => {
     setStats(event.target.value as statsType);
     saveSettings({ stats: event.target.value as statsType });
   };
@@ -149,7 +150,7 @@ export default function Collection (_props) {
       count={Math.ceil(content.length / n)} 
       page={p} 
       onChange={handlePage}
-      sx={{ width: "350px " }}
+      sx={{ width: "350px" }}
     />
     <FormControl>
       <InputLabel htmlFor="stats-drop">Stats</InputLabel>
@@ -157,7 +158,7 @@ export default function Collection (_props) {
         id="stats-drop"
         value={stats}
         /* @ts-ignore */
-        onChange={hanldeStats}
+        onChange={handleStats}
         sx={{ width: "106px" }}
       >
         <MenuItem value="min">Min</MenuItem>

src/components/collection/index.js

@@ -100,29 +100,29 @@ export default class Home extends React.Component {
   handleScroll = (event) => {
     event.preventDefault();
 
+    const 
+      h = document.documentElement, 
+      // b = document.body,
+      st = 'scrollTop',
+      sh = 'scrollHeight',
+      ch = 'clientHeight';
+      
+    const list = document.querySelector('.collection > .right');
+
     // Fix the side menu in place when scrolling down
     if (window.pageYOffset >= 235) {
-      const 
+
-        h = document.documentElement, 
-        // b = document.body,
-        st = 'scrollTop',
-        sh = 'scrollHeight',
-        ch = 'clientHeight';
       // const percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h[ch]) * 100;
       // let exp = h[ch] - (h[ch] * (percent - 85) / 100);
       const sm = document.getElementById("side-menu");
-      const list = document.querySelector('.collection > .right');
       const scrollBottom = (h[sh] - window.innerHeight - h[st]);
 
-      const setListHeight = (height) => {
+      if (list[ch] <= window.innerHeight) {
-        if (list[ch] < window.innerHeight) {
+        list.style.minHeight = `${window.innerHeight}px`;
-          list.style.minHeight = `${height}px`;
+      } 
-        } 
+      else if (list.style.minHeight) {
-        else if (list[ch] === window.innerHeight) return;
+        list.style.minHeight = null;
-        else if (list.style.minHeight) {
+      }
-          list.style.minHeight = null;
-        }
-      };
 
       // When nearing the end of the screen
       // (if element height offset is higher then height of screen)
@@ -140,11 +140,14 @@ export default class Home extends React.Component {
       else if (sm[ch] !== h[ch]) {
         fixedStyles.setFixed(window.innerHeight);
       }
-      
-      setListHeight(window.innerHeight);
     }
-    else if (fixedStyles.isFixed) {
+    else {
-      fixedStyles.removeFixed();
+      if (list.style.minHeight) {
+        list.style.minHeight = null;
+      }
+      if (fixedStyles.isFixed) {
+        fixedStyles.removeFixed();
+      }
     }
   };
 
@@ -199,16 +202,26 @@ export default class Home extends React.Component {
   navigation() {
     const numpages = Math.ceil(this.content.length / this.n);
 
+    const handleScroll = () => {
+      const player = document.getElementById("player");
+      player.scrollIntoView();
+    };
+
     const next = () => {
-      if (this.p < numpages) return (<button className="next-button" onClick={ () => {this.p++; window.scrollTo(0, 0)} }>next</button>);
+      if (this.p < numpages) return (<button className="next-button" onClick={ () => {this.p++; handleScroll()} }>next</button>);
       else return (<button className="next-button" disabled>next</button>);
     };
 
     const prev = () => {
-      if (this.p > 1) return (<button className="prev-button" onClick={ () => {this.p--; window.scrollTo(0, 0)} }>prev</button>);
+      if (this.p > 1) return (<button className="prev-button" onClick={ () => {this.p--; handleScroll()} }>prev</button>);
       else return (<button className="prev-button" disabled>prev</button>);
     };
 
+    const handlePerPage = (e) => {
+      this.n = e.target.value;
+      this.p = 1;
+    };
+
     return (
       <div className="entries">
         {this.content.length} results - page {this.p} of {numpages} {prev()} {next()}
@@ -216,10 +229,10 @@ export default class Home extends React.Component {
         {/*<input type="text" style={{width: '40px'}} value={this.n}
           onChange={(event) => {let x = event.target.value; if (!isNaN(x)) this.n=x;}
         />*/}
-        <input type="button" value="5" disabled={this.n=="5"} onClick={(e) => this.n=e.target.value} />&nbsp;
+        <input type="button" value="5" disabled={this.n=="5"} onClick={handlePerPage} />&nbsp;
-        <input type="button" value="10" disabled={this.n=="10"} onClick={(e) => this.n=e.target.value} />&nbsp;
+        <input type="button" value="10" disabled={this.n=="10"} onClick={handlePerPage} />&nbsp;
-        <input type="button" value="20" disabled={this.n=="20"} onClick={(e) => this.n=e.target.value} />&nbsp;
+        <input type="button" value="20" disabled={this.n=="20"} onClick={handlePerPage} />&nbsp;
-        <input type="button" value="50" disabled={this.n=="50"} onClick={(e) => this.n=e.target.value} />
+        <input type="button" value="50" disabled={this.n=="50"} onClick={handlePerPage} />
       </div>
     );
   }