【发布时间】：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" alt="logo">
<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" alt="">
</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防止滚动。但是，我不确定这是否是您想要的结果。 -
是的，它可以工作
标签： javascript html css kendo-ui kendo-grid