1. ホーム
  2. 質問と答え
  3. 私はスクロールバーを非表示にしようとしています

私はスクロールバーを非表示にしようとしています

2016-04-22 7 views
1

私はスクロールバーを隠そうとしています。私はスクロールバーを非表示にしようとしています

body::-webkit-scrollbar{display:none;}/* working in chrome */ 

body::-moz-scrollbar{display:none;} /*not working in Firefox */
私が与えているFirefoxの場合

..

body{overflow:-moz-scrollbars-none;}/* it hide the scroll bar */

が、真ん中のマウスでページをスクロールすることができません..いずれかが私に

出典

2016-04-22 yunus

+0

チェックこれはSO答えるhttp://stackoverflow.com/a/23771140/4639312 – Froy

+0

チェック：[IE、クローム＆Firefoxで]（http://stackoverflow.com/a/25561646/2142994） –

+0

http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll – gibberish

答えて

0

を作成することができますmoz-scrollbars-none;} Firefoxのスクロールバーを非表示にする

Firefoxのプロパティを書き込むとき。 スクロールバーが無効になります。マウスホイールでページをスクロールすることはできません

マウスホイールでページをスクロールするには、このスクリプトを追加する必要があります。

$(function() { 
jQuery.scrollSpeed(100, 800); 
}); // for page scrolling 


body{ -ms-overflow-style: none;} /* for ie hiding scroll bar */ 

body::-webkit-scrollbar{display:none;} /* chrome hiding scroll bar*/ 

body{overflow:-moz-scrollbars-none;} it hide the scroll bar for Firefox

出典

2016-05-02 12:56:18 yunus

1

を助けることができる私はbody {overflow-y: hidden;overflow-x: hidden;}ではないと考えていますあなたの質問に答えてください。スクロールを無効にするだけです。

これが可能答えは次のとおりです。

.viewport { 
 
    overflow: auto; 
 
    /* Make sure the inner div is not larger than the container 
 
    * so that we have room to scroll. 
 
    */ 
 
    max-height: 100%; 
 
    /* Pick an arbitrary margin/padding that should be bigger 
 
    * than the max width of all the scroll bars across 
 
    * the devices you are targeting. 
 
    * padding = -margin 
 
    */ 
 
    margin-right: -100px; 
 
    padding-right: 100px; 
 
} 
 
.hide-scroll { 
 
    overflow: hidden; 
 
} 
 
/* Optional styles */ 
 

 
.hide-scroll { 
 
    height: 300px; 
 
    background-color: lightgrey; 
 
    padding: 0 5px; 
 
    position: relative; 
 
} 
 
.hide-scroll:after { 
 
    content: ''; 
 
    height: 2em; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(219, 219, 219, 0)), to(rgba(211, 211, 211, 1))); 
 
    background: -webkit-linear-gradient(rgba(219, 219, 219, 0) 0%, rgba(211, 211, 211, 1) 100%); 
 
    background: -moz-linear-gradient(rgba(219, 219, 219, 0) 0%, rgba(211, 211, 211, 1) 100%); 
 
    background: -o-linear-gradient(rgba(219, 219, 219, 0) 0%, rgba(211, 211, 211, 1) 100%); 
 
    background: linear-gradient(rgba(219, 219, 219, 0) 0%, rgba(211, 211, 211, 1) 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00dbdbdb', endColorstr='#d3d3d3', GradientType=0); 
 
} 
 
.viewport p:last-child { 
 
    margin-bottom: 2em; 
 
}
<h1>Hidden scrollbar</h1> 
 
<hr> 
 
<div class="hide-scroll"> 
 
    <div class="viewport"> 
 
    <h2>Explaination</h2> 
 
    <p>This example hides the scroll bar of the inner div by hiding the outer div's overflow, and by applying a negative margin to <i>pull</i> the scrollbar off of the screen. There's an equal padding applied to the inner div to counter the negative margin 
 
     so that the content does not get pulled out of the viewport.</p> 
 
    <h2>Lorem Ipsum</h2> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus 
 
     vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    </div> 
 
</div>

を参照してください：original post

出典

2016-04-22 15:05:07

0

あなたはFFスクロールバーを非表示にすることができますが、それはスクロール機能を無効にします。クロームでの作業ではなく、Firefoxの

で

体{オーバーフロー： - ;：WebKitの-スクロールバー{どれも表示} - あなたは:: CSSプロパティで 体をスクロールバーを非表示に独自のScrollfunction

<div id="your-selector"    
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    </div> 

    var domTarget = document.querySelector("#your-selector"); 
    var jQueryTarget = $("#your-selector"); 
    var scrollAmmount = 0; 

    function scrollTarget(e) { 
     var evt = window.event || e; 
     var delta = evt.detail ? evt.detail * (-120) : evt.wheelDelta; 

     if (delta >= 0) { 
     if (scrollAmmount <= 120) { 
      scrollAmmount += 30; 
     } 
     jQueryTarget.css("top", scrollAmmount + "px"); 
     } else { 
     scrollAmmount -= 30; 
     jQueryTarget.css("top", scrollAmmount + "px"); 
     } 

     if (evt.preventDefault) { 
     evt.preventDefault(); 
     } else { 
     return false; 
     } 
    } 

    var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" 

    if (domTarget.attachEvent) { 
     domTarget.attachEvent("on" + mousewheelevt, scrollTarget); 
    } else if (domTarget.addEventListener) { 
     domTarget.addEventListener(mousewheelevt, scrollTarget, false); 
    }

出典

2016-04-28 10:21:54 Rakowu

関連する問題

 関連する問題