如何在瀏覽器中始終顯示垂直滾動條？

我想始終在我的網頁上顯示垂直滾動條。是否有可能使用JavaScript？我認爲這是可能的使用JavaScript或jQuery。我想要垂直滾動條是否有足夠的內容顯示或不顯示。如何在瀏覽器中始終顯示垂直滾動條？

謝謝。

2010-10-29 gautamlakum

你必須要求這些東西學習。 – Rimian 2012-05-10 07:27:06

[使主滾動條總是可見]的可能重複（https://stackoverflow.com/questions/1202425/making-the-main-scrollbar-always-visible） – Bae 2017-06-23 00:35:28

jQuery不應該是必需的。您可以嘗試添加CSS：

body {overflow-y:scroll;}

這適用於最新的瀏覽器，甚至IE6。

來源

2010-10-29 08:07:52

我相信'overflow-x'和'overflow-過去給我帶來了一些痛苦。 – 2010-10-29 08:12:09

我認爲只有當溢出時纔會顯示滾動條。若要顯示滾動條，請始終嘗試正文{0} {0} {0} {0}溢出-y：滾動; 身高：101％; } – 2010-10-29 08:16:42

你有這一輪錯誤的方式。如果您設置了overflow：auto，則會在需要時顯示滾動條。溢出：滾動總是顯示滾動條。如果內容不夠長，則滾動條變灰。 – 2010-10-29 08:26:56

只需使用CSS。

body { 
    overflow-y: scroll; 
}

來源

2010-10-29 08:11:01

注意OP正在尋找只顯示* vertical *滾動條。這種情況下的'overflow'屬性意味着水平滾動條也會被顯示出來。你應該用'overflow-y'來代替。 – Boaz 2014-03-11 12:16:58

@rogerdpack事實上，3年前， 4小時後，原來的評論:) – Boaz 2017-07-07 17:12:36

設置含div的overflow property到scroll。

來源

2010-10-29 08:11:46 jambox

嘗試在你的身體標記的onload方法上調用一個函數，並在該函數中改變body的樣式，就像這樣document.body.style.overflow ='scroll';你也可能需要設置HTML的寬度，因爲這將顯示水平滾動條以及

你的HTML文件將是這個樣子

<script language="javascript"> 
    function showscroll() { 
     document.body.style.overflow = 'scroll'; 
    } 
</script> 
</head> 
<body onload="showscroll()">

來源

2010-10-29 08:18:17 megha

好吧，OP要求一個Javascript解決方案，但這並不意味着這就是他需要的。這是改變風格的非常糟糕的解決方案。這是CSS的用途：級聯** Style **表格。在CSS中，它只是一條線，就像接受的答案所示。 – stevenvh 2014-05-16 17:15:55

這裏是一個方法。這不僅會提供滾動條容器，還會顯示滾動條，即使內容不夠（根據您的要求）。也將在iPhone上運行，和Android設備以及..

<style> 
    .scrollholder { 
     position: relative; 
     width: 310px; height: 350px; 
     overflow: auto; 
     z-index: 1; 
    } 
</style> 

<script> 
    function isTouchDevice() { 
     try { 
      document.createEvent("TouchEvent"); 
      return true; 
     } catch (e) { 
      return false; 
     } 
    } 

    function touchScroll(id) { 
     if (isTouchDevice()) { //if touch events exist... 
      var el = document.getElementById(id); 
      var scrollStartPos = 0; 

      document.getElementById(id).addEventListener("touchstart", function (event) { 
       scrollStartPos = this.scrollTop + event.touches[0].pageY; 
       event.preventDefault(); 
      }, false); 

      document.getElementById(id).addEventListener("touchmove", function (event) { 
       this.scrollTop = scrollStartPos - event.touches[0].pageY; 
       event.preventDefault(); 
      }, false); 
     } 
    } 
</script> 

<body onload="touchScroll('scrollMe')"> 

    <!-- title --> 
    <!-- <div class="title" onselectstart="return false">Alarms</div> --> 
    <div class="scrollholder" id="scrollMe"> 

</div> 
</body>

來源

2012-07-30 21:54:01

剛一說明： OS X Lion中，溢出設置爲「滾動」的行爲更像在滾動條汽車在使用時將只顯示。不用時它們會消失。所以如果上面的解決方案似乎沒有工作，這可能是爲什麼。

這是你需要什麼來解決它：

::-webkit-scrollbar { 
    -webkit-appearance: none; 
    width: 7px; 
} 
::-webkit-scrollbar-thumb { 
    border-radius: 4px; 
    background-color: rgba(0, 0, 0, .5); 
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5); 
}

您可以相應樣式。

來源

2015-07-07 20:15:57 molls223

將該類添加到要滾動的div。

overflow-x：hidden;隱藏水平滾動條。雖然overflow-y：scroll;可讓您垂直滾動。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.scroll { 
    width: 500px; 
    height: 300px; 
    overflow-x: hidden; 
    overflow-y: scroll; 
} 


</style> 
</head> 
<body> 

<div class="scroll"><h1> DATA </h1></div>

來源

2017-06-09 08:37:31

儘管此代碼可能會回答問題，但提供有關如何解決問題和/或爲何解決問題的其他上下文將提高答案的長期價值。 – Badacadabra 2017-06-09 14:54:51

請使用[編輯]鏈接來解釋此代碼的工作原理，而不只是給出代碼，因爲解釋更有可能幫助未來的讀者。另見[回答]。 [源]（http://stackoverflow.com/users/5244995） – 2017-06-09 14:58:50

添加說明。 – 2017-06-12 03:41:21

如何在瀏覽器中始終顯示垂直滾動條？

回答

相關問題