碼上快樂

相關內容    簡體    繁體

一、移動端滾動條的問題

本文轉載自   查看原文   2020-04-07 15:13   758    Vue.js/ Html5

一、固定高度的情況下

如圖下：

  代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
#overflowTest {
    background: #4CAF50;
    color: white;
    padding: 15px;
    width: 80%;
    height: 100px;
    overflow: scroll;
    border: 1px solid #ccc;
}
</style>
</head>
<body>

<div id="overflowTest">
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
</div>

</body>
</html>

二、然后修改100%

  代碼如下：

<!DOCTYPE html>
<html>
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style type="text/css">
        *{padding: 0;margin: 0;}
        #overflowTest {
            background: #4CAF50;
            color: white;
            padding: 15px;
            width: 80%;
            height: 100%;
            overflow: auto;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<div id="overflowTest">
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
</div>
</body>
</html>

注意：當高度設置100%的情況下，滾動條就會由瀏覽器滾動條接手

三、測試 頭部加fixed，內容 margin-top 滾動條還是完全從頂部開始 滾動的

<!DOCTYPE html>
<html>
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style type="text/css">
        *{padding: 0;margin: 0;}
        body{
            
        }
        .head{
            height: 44px;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: red;
        }
        #overflowTest {
            margin-top: 44px;
            background: #4CAF50;
            color: white;
            padding: 15px;
            width: 80%;
            height: 100%;
            overflow: auto;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<div class="head">
ssssssss
</div>
<div id="overflowTest">
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
</div>
</body>
</html>

 而且如果給body設置滾動

html,body{
overflow: hidden;
}

因為內部是100%由瀏覽器滾動條接管的，所以設置隱藏后，會導致頁面划不動，除非更改設置 內部高度固定

 四、html、body設置隱藏 div設置滾動且固定高度

刷新幾次會出現 滾動條 平均大約6次 有一次不顯示滾動條的，然后 想辦法自定義滾動條

 代碼如下：

<!DOCTYPE html>
<html>
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style type="text/css">
        *{padding: 0;margin: 0;}
        html,body{
            overflow: hidden;
        }
        #overflowTest {
            background: #4CAF50;
            color: white;
            padding: 15px;
            width: 80%;
            height: 100%;
            overflow: auto;
            border: 1px solid #ccc;
        }

        /* 針對缺省樣式 (必須的) */
        ::-webkit-scrollbar {
                width: 10px;
                height:0px;
        }
        /* 滾動條的滑軌背景顏色 */
        ::-webkit-scrollbar-track {
            background-color: gray;
            border-radius:5px;
        }
        /* 滑塊顏色 */
        ::-webkit-scrollbar-thumb {
            background-color: red;
            border-radius:20px;
        }
        /*內層軌道的顏色*/
        ::-webkit-scrollbar-track-piece{
            background-color:gray;
            border-radius:5px;
        }
        /* 滑軌兩頭的監聽按鈕顏色 */
        ::-webkit-scrollbar-button {
            background-color:gray;
            width:0;
            height:0;
        }
        /* 橫向滾動條和縱向滾動條相交處尖角的顏色 */
        ::-webkit-scrollbar-corner {
            background-color: black;
        }


    </style>
</head>
<body>
<div id="overflowTest">
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
<p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
</div>
<script type="text/javascript">
                let winHeight = document.documentElement.clientHeight; //視口大小
                var listContent=document.getElementById('overflowTest');
                                    
                listContent.style.height= 500+'px'  //調整上拉加載框高度


</script>
</body>
</html>

然后發現 手機端滾動條顯示無效，我的是蘋果7p

 

二番

一、用偽元素隱藏滾動條

主要是：

html,
body {
      overflow: hidden;
}

.wrapper{
      width: 80%;  

      padding: 15px;

      background: #4CAF50;
      border: 1px solid #ccc;

      overflow: auto;
}


/* 掉滾動條 */
::-webkit-scrollbar {
    width:0;
    height:0;
    display:none;
    background:transparent;
}

 

 繼續測試

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title></title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }

    html,
    body {
      overflow: hidden !important;
    }

    .wrapper {
      width: auto;
      /*所以width不設置100%,否則會導致監聽body只能重合導致不顯示,內部的元素設置100%*/

      padding: 15px;
      height: 500px;
      background: #4CAF50;
      border: 1px solid #ccc;

      overflow: auto;

    }

  </style>

</head>

<body>
  <div id="wrapper" class="wrapper">
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
    <p>這里的文本內容是可以滾動的，滾動條方向是垂直方向。</p>
  </div>
  <script type="text/javascript">
    let winHeight = document.documentElement.clientHeight; //視口大小
    var listContent = document.getElementById('wrapper');
    listContent.style.height = 500 + 'px'  //調整上拉加載框高度

  </script>

</body>

</html>

 

 

 

 

 

 

解決方案最好就是用固定的容器接替


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 移動端顯示 滾動條 移動端設置滾動后顯示滾動條 解決移動端ios下overflow-x scroll無法隱藏滾動條的問題 pc和移動端獲取滾動條的位置 關於vue項目去除margin和padding后設置元素width和height為100%后，出現滾動條問題（移動端） div隨鼠標移動而移動（滾動條） css隱藏滾動條、移動端滾動卡頓的解決 移動端去除橫向滾動條 純css隱藏移動端滾動條解決方案（ios上流暢滑動） 純css隱藏移動端滾動條解決方案（ios上流暢滑動）
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM