web-dev-qa-db-ja.com

ブラウザに常に垂直スクロールバーを表示する方法は？

Webページに常に垂直スクロールバーを表示したい。 JavaScriptを使用することは可能ですか？ javascriptまたはjQueryを使用して可能だと思います。表示するのに十分なコンテンツがあるかどうかにかかわらず、垂直スクロールバーが必要です。

ありがとう。

htmlcssbrowser
60
gautamlakum

jQueryは必須ではありません。 CSSを追加してみてください：

body    {overflow-y:scroll;}

これは、IE6を含む最新のブラウザーで機能します。

133
Coin_op

注意： 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);
}

それに応じてスタイルを設定できます。

30
molls223

CSSを使用してください。

body {
  overflow-y: scroll;
}
15
Júlio Santos

含むoverflowの-​​ divプロパティ をscrollに設定します。

3
jambox

bodyタグのonloadメソッドで関数を呼び出して、その関数でbodyのスタイルを次のように変更してみてくださいdocument.body.style.overflow = 'scroll';また、これは同様に水平スクロールバーを表示するため、HTMLの幅を設定する必要があります

あなたのhtmlファイルは次のようになります

<script language="javascript">
    function showscroll() {
        document.body.style.overflow = 'scroll';
    }
</script>
</head>
<body onload="showscroll()">
2
megha
_// Nothing to show here_
_body {
  height: 150vh;
}

::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .6);
}

/* Of course you can style it even more */_
<h1 style="margin: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-family: Helvetica, Arial, sans-serif;">Scroll</h1>
0
codeWithMe

これがメソッドです。これにより、スクロールバーコンテナが提供されるだけでなく、コンテンツが十分でない場合でも（要件に応じて）スクロールバーが表示されます。 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>
0
SandBag_1996

クラスをスクロール可能な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>
0
Sarat Chandra