Question

我有这个名为items的元素，元素内的元素长度超过元素高度，我想让它可滚动但隐藏滚动条，我该怎么做？

<div class="left-side">
    <div class="items" style="display:block;width: 94%;margin: 0 auto;overflow: hidden;">
    </div>
</div>

.left-side {
    width: 1470px;
    padding-top: 20px;
    height: 878px;
}

我尝试将左侧类溢出设置为auto，但是没有做任何事情。

Answer 1

你可以隐藏它：

html {
  overflow:   scroll;
}
::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

有关详细信息，请参阅：Hide scroll bar, but while still being able to scroll

Answer 2

我将SO中的几个不同答案组合到以下代码段中，这些代码应该可以在所有（即使不是大多数）现代浏览器上运行。您所要做的就是将CSS类var https = require('https'); //contains execution environment and price history module.exports = { //gets pricing data for a given asset on bitmex within a set time frame. fetchPricingBucket: function(timeFrame, symbol, windowSize, startTime, endTime, callback) { //append arguments to request var request = "https://www.bitmex.com/api/v1/trade/bucketed?"; request += "binSize=" + timeFrame + "&"; request += "symbol=" + symbol + "&"; request += "count=" + windowSize + "&"; request += "startTime=" + startTime + "&"; request += "endTime=" + endTime; https.get(request, function (res) { const { statusCode } = res; const contentType = res.headers['content-type']; //check for erroers let error; if (statusCode !== 200) { error = new Error('Request Failed.\n' + `Status Code: ${statusCode}`); } else if (!/^application\/json/.test(contentType)) { error = new Error('Invalid content-type.\n' + `Expected application/json but received ${contentType}`); } if (error) { console.error(error.message); // consume response data to free up memory res.resume(); return; } // Buffer the body entirely for processing as a whole. var bodyChunks = []; res.on('data', function(chunk) { // You can process streamed parts here... bodyChunks.push(chunk); }).on('end', function() { callback(JSON.parse(bodyChunks), error); // ...and/or process the entire body here. }) //returns the json response and error to the calling function. }); },添加到您希望对其应用的元素上。

.disable-scrollbars

如果要使用SCSS / SASS：

.disable-scrollbars::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* Chrome/Safari/Webkit */
}

.disable-scrollbars {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}

Answer 3

如果您真的想摆脱滚动条，请将信息分成两个单独的页面。

Usability guidelines on scrollbars by Jakob Nielsen：

滚动和滚动条有五个基本的可用性指南：


如果某个区域有滚动内容，请提供滚动条。不要依赖   自动滚动或拖动，人们可能不会注意到。

隐藏   如果所有内容都可见，则滚动条。如果人们看到滚动条，他们   假设有额外的内容，如果他们不能，将会感到沮丧   滚动。

遵守GUI标准并使用看起来像的滚动条   滚动条。

避免在网页上水平滚动并将其最小化   别处。

显示所有重要信息。用户   通常根据他们可以看到的内容来决定是留下还是离开   没有滚动。此外，他们只分配了20％的注意力   低于首位。

要使滚动条仅在需要时可见（即当有内容向下滚动时），请使用overflow: auto。

Answer 4

希望这会有所帮助

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

Answer 5

可在所有主要浏览器上使用

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}

Answer 6

即使设置为overflow: hidden;（即隐藏滚动条），您也可以使用SlimScroll插件使div可滚动。

您还可以使用此插件控制触摸滚动以及滚动速度。

希望这会有所帮助：）

Answer 7

类似于Kiloumap L'artélon的回答，

::-webkit-scrollbar {
    display:none;
}

也有效

Answer 8

如果你使用sass，你可以尝试这个

&::-webkit-scrollbar { 

}

Answer 9

您可以将其隐藏在特定的 div usig 类中：

//HTML

<div class="hide-scroll"></div>

//style
.hide-scroll{
   overflow: scroll;
}
.hide-scroll::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

CSS隐藏滚动条，但元素可滚动

9 个答案: