blocks|key|517018|text|也许你可以使用css来隐藏它，或者用它做一些样式，让它看起来是隐藏的。这是我找到的一些链接。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|517019|http://css-tricks.com/custom-scrollbars-in-webkit/|offset|length|517020|http://www.yourhtmlsource.com/stylesheets/scrollbars.html|517021|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|1E|0|0|0|1L|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|H|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]|O|$5|K|L|M|A|$N|G]]]]

<p>Maybe you can use css and hide or do some styling with it so it looks hidden. Here's one some links I found.</p>

<p><a href="http://css-tricks.com/custom-scrollbars-in-webkit/" rel="nofollow">http://css-tricks.com/custom-scrollbars-in-webkit/</a></p>

<p><a href="http://www.yourhtmlsource.com/stylesheets/scrollbars.html" rel="nofollow">http://www.yourhtmlsource.com/stylesheets/scrollbars.html</a></p>


blocks|key|1985866|text|好吧，真正的原因是你为什么想要这样做，但既然你问了，我会试着解决你的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1985867|您将需要两个div。一个嵌套在另一个中。|1985868|<div+class="outside">
++++<div+class="inside">
++++++++Scrolling+Content+Goes+here.
++++</div>
</div>|code-block|syntax|javascript|1985869|然后，您将需要一些CSS来帮助解决这种情况。溢出:自动将给你滚动一旦它超过了高度限制。为了这个例子，我设置了一个随机宽度。在右侧放置一个填充，将滚动条推出.outer+div类。这样，您就不必担心内容会被放在.outer目录下。|1985870|.inside+{+width:+500px;+overflow:+auto;+height:+300px;+padding-right:+20px;+}|1985871|对于外部类，您需要指定相同的高度，相同的宽度，但overflow:hidden。|1985872|.outside+{+width:+500px;+height:+300px;+overflow:+hidden;+}|1985873|示例：jsFiddle|offset|length|1985874|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/gBdMf/1/^0|0|0|0|0|0|0|0|3|8|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|19|8|@]|9|@$S|1A|T|1B|1|1C]]|A|$]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>Well, the real reason would be why you would want that, but since you asked I will try and solve your issue.</p>

<p>You will need two divs. One nested inside the other.</p>

<pre><code>&lt;div class="outside"&gt;
    &lt;div class="inside"&gt;
        Scrolling Content Goes here.
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>You will then need some CSS to help this situation out. The overflow:auto will give you the scrolling once it goes past the height limitations. I put on an random width for sake of the example. Putt a padding on the right hand side to push the scroll bar out of the .outer div class. This way you won't have to worry about the content going under the .outer div.</p>

<pre><code>.inside { width: 500px; overflow: auto; height: 300px; padding-right: 20px; }
</code></pre>

<p>for the outer class you will need to specify the same height, same width, but overflow:hidden. </p>

<pre><code>.outside { width: 500px; height: 300px; overflow: hidden; }
</code></pre>

<p>EXAMPLE: <a href="http://jsfiddle.net/gBdMf/1/" rel="noreferrer">jsFiddle</a></p>


blocks|key|5096623|text|这是在IE和Firefox中测试过的-两者处理填充的方式略有不同，所以我使用高度和宽度来考虑内容可见性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5096624|有两个容器是有意义的-一个用于容器，另一个用于内容，然而，由于浏览器处理填充的方式不同，将滚动条推入隐藏区域比您想象的要难得多。这就是第三个容器的用武之地：|5096625|5096626|One容器用于不带滚动条的父维度|unordered-list-item|5096627|One容器，其中包含推送到隐藏区域的滚动条|5096628|One容器，该容器包含具有正确宽度的内容设置|5096629|5096630|这是通过样式表技巧实现的-样式表已经被注释，所以您可以按照其中的说明/注释进行操作。|5096631|希望这能有所帮助！:)|5096632|<html>
<head>
++++<style+type="text/css">
++++/*+Propetary+paragraph+style+*/
++++p+{
++++++++padding:+0px;
++++++++margin:+0px+0px+7px+0px;
++++}
++++/*+Global+notes:
+++++++-+Since+the+
++++/*+This+is+the+outer+container+-+set+desired+height+and+width+here+*/
++++.scrollabelDivContainer+{
++++++++width:+300px;
++++++++height:+100px;
++++++++padding:+0px;
++++++++margin:+0px;
++++++++overflow:+hidden;
++++++++border:+2px+dashed+#ddd;
++++}
++++/*+This+is+the+div+inside+the+container+-+the+height+should+
+++++++match+the+container+and+width+be+more+(to+push+the+
+++++++scrollbar+into+the+hidden+content+area)+*/
++++.scrollableDiv+{
++++++++width:+400px;
++++++++height:+100px;
++++++++padding:+0px;
++++++++margin:+0px;
++++++++overflow-x:+hidden;
++++++++overflow-y:+scroll;
++++}
++++/*+This+houses+the+content.++Set+the+widget+10px+less+than+the+
+++++++container+width+to+ensure+the+content+is+visible+in+all+browsers+*/
++++.scrollableDivContent+{
++++++++width:+290px;
++++++++padding:+0px;
++++++++margin:+0px;
++++++++overflow:+auto;
++++}
++++</style>
</head>

<body>
++++<div+class="scrollabelDivContainer">
++++++++<div+class="scrollableDiv">
++++++++++++<div+class="scrollableDivContent">
++++++++++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Cras+tincidunt+consequat+urna+ut+tincidunt.+Vestibulum+molestie+leo+quis+dui+malesuada+vulputate+eget+tempor+purus.+Pellentesque+habitant+morbi+tristique+senectus+et+netus+et+malesuada+fames+ac+turpis+egestas.+Cras+nec+orci+enim,+vel+tristique+lectus.+Sed+lobortis+ultrices+enim+eu+consequat.</p>
++++++++++++++++<p>Integer+magna+lectus,+iaculis+sit+amet+interdum+nec,+ullamcorper+ut+purus.+Sed+aliquam+sollicitudin+lacinia.+Proin+porttitor+aliquet+lorem,+eu+dictum+lorem+suscipit+et.+Ut+vestibulum+eros+quis+turpis+auctor+id+sollicitudin+risus+faucibus.+Quisque+volutpat+nibh+ut+sem+euismod+rutrum.+Ut+eget+orci+non+quam+scelerisque+laoreet+sit+amet+a+metus.+Mauris+aliquam+facilisis+lacinia.<p>
++++++++++++</div>
++++++++</div>
++++</div>
</body>

</html>|code-block|syntax|javascript|5096633|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|G|7|11|8|@]|9|@]|A|$]]|$1|J|3|K|5|G|7|12|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|13|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|15|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|16|8|@]|9|@]|A|$T|U]]|$1|V|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|W|$]]

<p>This was tested in IE and Firefox - both handle padding a little differently, so I am using height and width to account for content visibility.</p>

<p>It makes sense to have 2 containers - one for the container and one for the content, however since browsers handle padding differently, it's a lot harder than you think to push the scrollbar into the hidden area.  This is where the third container comes in:</p>

<ul>
<li>One container for the parent dimensions without scrollbars</li>
<li>One container that contains the scrollbar which is pushed into the hidden area</li>
<li>One container that houses the content with the correct width set</li>
</ul>

<p>This is accomplished through stylesheet tricks - the stylesheet has been commented so you can follow the instructions / comments in there.</p>

<p>Hope this helps! :)</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;style type="text/css"&gt;
    /* Propetary paragraph style */
    p {
        padding: 0px;
        margin: 0px 0px 7px 0px;
    }
    /* Global notes:
       - Since the 
    /* This is the outer container - set desired height and width here */
    .scrollabelDivContainer {
        width: 300px;
        height: 100px;
        padding: 0px;
        margin: 0px;
        overflow: hidden;
        border: 2px dashed #ddd;
    }
    /* This is the div inside the container - the height should 
       match the container and width be more (to push the 
       scrollbar into the hidden content area) */
    .scrollableDiv {
        width: 400px;
        height: 100px;
        padding: 0px;
        margin: 0px;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    /* This houses the content.  Set the widget 10px less than the 
       container width to ensure the content is visible in all browsers */
    .scrollableDivContent {
        width: 290px;
        padding: 0px;
        margin: 0px;
        overflow: auto;
    }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="scrollabelDivContainer"&gt;
        &lt;div class="scrollableDiv"&gt;
            &lt;div class="scrollableDivContent"&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt consequat urna ut tincidunt. Vestibulum molestie leo quis dui malesuada vulputate eget tempor purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras nec orci enim, vel tristique lectus. Sed lobortis ultrices enim eu consequat.&lt;/p&gt;
                &lt;p&gt;Integer magna lectus, iaculis sit amet interdum nec, ullamcorper ut purus. Sed aliquam sollicitudin lacinia. Proin porttitor aliquet lorem, eu dictum lorem suscipit et. Ut vestibulum eros quis turpis auctor id sollicitudin risus faucibus. Quisque volutpat nibh ut sem euismod rutrum. Ut eget orci non quam scelerisque laoreet sit amet a metus. Mauris aliquam facilisis lacinia.&lt;p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>


<p>I am trying to be able to scroll inside one div but without showing the actual scrollbar.</p>

<p>I need the user to be able to scroll using the scrollwheel</p>

<p>Does anyone have ideas as to how I can accomplish this?</p>

<p>Thanks!</p>


Using jQuery to hide div scrollbar, but retain scrolling?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我试图能够在一个div中滚动，但不显示实际的滚动条。我需要用户能够使用滚轮滚动有没有人知道我如何才能做到这一点？谢谢!

问使用jQuery隐藏div滚动条，但保留滚动？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery隐藏div滚动条，但保留滚动？EN