额外的滚动条如何删除？
Posted
技术标签:
【中文标题】额外的滚动条如何删除？【英文标题】：Extra scrollbar how can i remove it? 【发布时间】：2022-01-14 20:12:49 【问题描述】：您好，由于某种原因，我遇到了一些问题，出现了一个额外的滚动条，在我进行调试和测试之前没有发生，但是在我推送并提交到 github 之后，我发现有一个额外的滚动条，因为我正在使用 KendoGrind因为它原本是无限滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Favicons -->
<link rel="icon" href="../../assets/images/icon-32x32.png">
<link rel="icon" href="../../assets/images/icon-192x192.png">
<!-- Bootstrap, jQuery & Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<!--Bootstrap style min css cant load -->
<!--<link rel="stylesheet" href="bootstrap.min.css">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Kendo UI -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link href="https://kendo.cdn.telerik.com/2021.3.1109/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2021.3.1109/styles/kendo.default.min.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2021.3.1109/js/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1109/js/kendo.all.min.js"></script>
<!-- Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://unpkg.com/feather-icons"></script>
<!-- Stylesheet -->
<link rel="stylesheet" href="../../assets/styles/style.css">
<!-- Components -->
<script src="../../assets/js/navbar.js"></script>
<script src="../../assets/js/table_row_highlight.js"></script>
<!-- load the spinner loader / option ?-->
<script src="../../assets/js/manageCustomer.js"></script>
<!-- Global Script -->
<script src="../../assets/js/global.js" defer></script>
<title>Eco Exchange - Manage Customers</title>
<style>
/*Button style */
.custom
width: 120px
.highlight
background-color: lightgray;
.table-responsive
padding-top: 50px ;
.picture
width: 100px;
height: 100px;
border-radius: 50%;
/* Basically style of the grind table td */
div.k-grid td
border-bottom: 1px solid lightgray ;
border-top: 1px solid lightgray ;
/* Basically style of the grind header */
.k-grid .k-grid-header .k-header
background-color: white;
font-size: 18px;
font-weight: bold;
/* Basically style of the grind bottom */
.k-grid
border-bottom: solid lightgray;
</style>
</head>
<body>
<main>
<!-- Basically a white rectange inside-->
<div id="main-container">
<!-- Navigation bar-->
<div id="navbar"></div>
<div id="main-content">
<div id="container-head">
<!-- .header-side-elem is used to centre the header logo -->
<img class="header-side-elem" id="header-logo" src="../../assets/images/logo.png" >
<h3 id="header-text">Manage Customers</h3>
<div class="header-side-elem" style="width:120px;"></div>
</div>
<!-- the white rectange body contain-->
<div id="container-body">
<div class="col-12">
<br />
<div class="input-group">
<div class="col-md-7">
<!-- Search bar components -->
<span id="search-icon" class="fa fa-search search-icon-span"></span>
<input class="search-input form-control" placeholder="Name" type="text"
name="Customer Name" id="search-customer-name">
</div>
<!-- button all of it-->
<fieldset class='btn-group'>
<button id="add" type="button" class="btn btn-primary btn custom mr-3" style="border-radius: 5px;">Add </button>
<button id="view" type="button" class="dark view btn btn-primary btn custom mr-3 disabled change-row" style="border-radius: 5px;" disabled>View Details</button>
</fieldset>
<div class="col-md-10">
<div class="table-responsive">
<table id="customer-list" class="table">
<!-- Loading Spinner Div -->
<div id="loading-container">
<p>Fetching all customer data...</p>
<div id="loading-spinner">
</div>
</div>
<tbody>
</tbody>
</table>
</div>
<!--AJAX call database-->
<script>
$.ajax(
url: "https://ecoexchange.dscloud.me:8090/api/get",
method: "GET",
// In this case, we are going to use headers as
headers:
// The query you're planning to call
// i.e. <query> can be UserGet(0), RecyclableGet(0), etc.
query: "CustomerGet(0)",
// Gets the apikey from the sessionStorage
apikey: sessionStorage.getItem("apikey")
,
success: function (data, xhr, textStatus)
//console.log(data)
const buildTable = data =>
const table = document.querySelector("#customer-list tbody");
for (let i = 0; i < data.length; i++)
let row =
`
<tr>
<td class="cell-customer-name"><img src = "$data[i].Picture" class="picture" ></img></td>
<td class="cell-customer-name" style="padding-right: 80px; padding-top: 10px; font-weight: bold; font-size: 18px;">$data[i].Name</td>
</tr>`;
table.insertAdjacentHTML('beforeEnd', row);
;
// Fetch method
const getData = async (url) =>
const response = await fetch(url,
method: 'GET',
headers:
query: "CustomerGet(0)",
// Gets the apikey from the sessionStorage
apikey: sessionStorage.getItem("apikey")
);
const json = await response.json();
$("#loading-container").hide();
return buildTable(json);
;
getData('https://ecoexchange.dscloud.me:8090/api/get')
,
error: function (xhr, textStatus, err)
console.log(err);
);
</script>
<!-- Search bar function -->
<script>
$("#search-customer-name").on("keyup change", function()
var customername = $("#search-customer-name").val().toLowerCase();
console.log(customername);
if (customername == "")
$('#customer-list tbody tr td.cell-customer-name').parent().show();
else
$("#customer-list tbody tr").filter(function()
var customernameText = $(this).children("td.cell-customer-name").text().toLowerCase();
$(this).toggle(
(customernameText.indexOf(customername)>=0)
);
)
;
)
</script>
<!--Kendo UI Endless scrollbar -->
<script>
$("#customer-list").kendoGrid(
height: 550,
scrollable:
endless: true,
,
columns: [
field: "Profile",
width: "12px",
,
field: "Name",
width: "100px"
,
],
);
</script>
</div>
</div>
</div>
</main>
<footer>
<div class="overlay"></div>
<img src="../../assets/images/wave.png" >
</footer>
<script>
// This global value it used to properly highlight the page name for the navbar
const CURRENT_TAB = "manageCustomers";
</script>
<!-- Feather replace to enable feather icons -->
<script>
feather.replace();
</script>
</body>
</html>
这是我做的原始测试图片
在我拉和推之后它变成了这样
有一个额外的滚动条为什么会发生这种情况需要帮助，因为我查看了我的代码并没有找到我添加或遗漏的任何内容
【问题讨论】：
您有在线网站吗？ 如果需要，您可以随时在 CSS 中使用overflow: hidden 防止滚动。但是，我不确定这是否是您想要的结果。
是的，它可以工作 我决定从这个 div 中隐藏额外的滚动条，因为它似乎来自这里
【参考方案1】：
这使我的 div 中的额外滚动条暂时消失了，这正是我想要的
<div class="table-responsive" style="overflow: hidden;">
【讨论】：
以上是关于额外的滚动条如何删除？的主要内容，如果未能解决你的问题，请参考以下文章
React - Material UI：如何从表格中删除滚动条
如何从 JetBrains IDEA 的滚动条中删除大部分亮点？
如何从 Eclipse 编辑器中删除/隐藏垂直和水平滚动条？