滚动吸顶

src/view/plugins/toggleMusicSheet/choosePartName/index.module.less

@@ -28,16 +28,23 @@
     padding: 36px 20px 12px 20px;
     .pickerBox{
       width: 100%;
-      height: calc(100% - 40px);
+      height: calc(100% - 52px);
+      margin-bottom: 12px;
       display: flex;
       flex-direction: column;
-      overflow: hidden;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+          width: 0;
+          display: none;
+      }
       .titCon{
         display: flex;
         align-items: center;
-        margin-top: 10px;
-        &:first-child{
-          margin-top: 0;
+        padding: 10px 0;
+        &.stickyTit{
+          position: sticky;
+          top: 0;
+          background-color: #fff;
         }
         .tit{
           font-weight: 600;
@@ -54,30 +61,6 @@
         }
       }
       .content{
-        margin-top: 10px;
-        &.sheetCon{
-          flex-grow: 1;
-          overflow: hidden;
-          position: relative;
-          /* 解决iphonex 不能滚动 */
-          .boxCon{
-            position: absolute;
-            left: 0;
-            top: 0;
-            bottom: 0;
-            right: 0;
-            overflow: hidden;
-          }
-          .con{
-            width: 100%;
-            height: calc(100% - 4px);
-            overflow-y: auto;
-            &::-webkit-scrollbar {
-                width: 0;
-                display: none;
-            }
-          }
-        }
         .selBtn{
           width: 100%;
           height: 34px;

src/view/plugins/toggleMusicSheet/choosePartName/index.tsx

@@ -84,23 +84,19 @@ export default defineComponent({
                   </div>
                 </>
             }
-            <div class={styles.titCon}>
+            <div class={[styles.titCon, styles.stickyTit]}>
               <div class={styles.tit}>选择声部</div>
               {
                 state.modeType === 'practise' && 
                 <div class={styles.tips}>(最多可选4个)</div>
               }
             </div>
-            <div class={[styles.content, styles.sheetCon]}>
-              <div class={styles.boxCon}>
-                <div class={styles.con}>
-                  {
-                    props.partListNames.map((item: any)=>{
-                      return <div class={[styles.selBtn,selValues.value.includes(item.value) && styles.active]} onClick={()=>{hanldeSelSheet(item.value)}}>{item.text}</div>
-                    })
-                  }
-                </div>
-              </div>
+            <div class={[styles.content]}>
+              {
+                props.partListNames.map((item: any)=>{
+                  return <div class={[styles.selBtn,selValues.value.includes(item.value) && styles.active]} onClick={()=>{hanldeSelSheet(item.value)}}>{item.text}</div>
+                })
+              }
             </div>
           </div>
           <div class={styles.btnCon}>