1. 首頁
  2. 問答
  3. 我試圖隱藏滾動條

我試圖隱藏滾動條

2016-04-22 40 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中，鉻，火狐（http://stackoverflow.com/a/25561646/2142994） –

+0

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

回答

0

與CSS屬性 身體::隱藏滾動條 - WebKit的滾動條{顯示：無;}在Chrome中工作，但不能在Firefox

體{溢出： - 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，但它會禁用滾動功能。 您可以創建自己的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

相關問題

 相關問題