Блог

Здравствуйте, у меня по какой-то причине возникла проблема с появлением дополнительной полосы прокрутки, которой раньше не было, когда я выполнял отладку и тестирование, однако после того, как я нажал и зафиксировал на github, я понял, что есть дополнительная полоса прокрутки, так как я использую KendoGrind для нее для бесконечной полосы прокрутки изначально

 lt;!DOCTYPE htmlgt; lt;html lang="en"gt;    lt;headgt;  lt;meta charset="UTF-8"gt;  lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt;   lt;!-- Favicons --gt;  lt;link rel="icon" href="../../assets/images/icon-32x32.png"gt;  lt;link rel="icon" href="../../assets/images/icon-192x192.png"gt;      lt;!-- Bootstrap, jQuery amp; Popper --gt;  lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"  integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"gt;lt;/scriptgt;   lt;!--Bootstrap style min css cant load --gt;  lt;!--lt;link rel="stylesheet" href="bootstrap.min.css"gt;--gt;  lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"gt;  lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"gt;lt;/scriptgt;   lt;!-- Kendo UI --gt;   lt;script src="https://code.jquery.com/jquery-1.12.4.min.js"gt;lt;/scriptgt;   lt;link href="https://kendo.cdn.telerik.com/2021.3.1109/styles/kendo.common.min.css" rel="stylesheet" /gt;   lt;link href="https://kendo.cdn.telerik.com/2021.3.1109/styles/kendo.default.min.css" rel="stylesheet" /gt;   lt;script src="https://kendo.cdn.telerik.com/2021.3.1109/js/jquery.min.js"gt;lt;/scriptgt;  lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"gt;lt;/scriptgt;  lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"gt;lt;/scriptgt;   lt;script src="https://kendo.cdn.telerik.com/2021.3.1109/js/kendo.all.min.js"gt;lt;/scriptgt;         lt;!-- Icons --gt;  lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"gt;  lt;script src="https://unpkg.com/feather-icons"gt;lt;/scriptgt;   lt;!-- Stylesheet --gt;  lt;link rel="stylesheet" href="../../assets/styles/style.css"gt;  lt;!-- Components --gt;  lt;script src="../../assets/js/navbar.js"gt;lt;/scriptgt;   lt;script src="../../assets/js/table_row_highlight.js"gt;lt;/scriptgt;   lt;!-- load the spinner loader / option ?--gt;  lt;script src="../../assets/js/manageCustomer.js"gt;lt;/scriptgt;     lt;!-- Global Script --gt;  lt;script src="../../assets/js/global.js" defergt;lt;/scriptgt;    lt;titlegt;Eco Exchange - Manage Customerslt;/titlegt;   lt;stylegt;  /*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;      }       lt;/stylegt;  lt;/headgt;   lt;bodygt;  lt;maingt;  lt;!-- Basically a white rectange inside--gt;  lt;div id="main-container"gt;   lt;!-- Navigation bar--gt;  lt;div id="navbar"gt;lt;/divgt;  lt;div id="main-content"gt;  lt;div id="container-head"gt;  lt;!-- .header-side-elem is used to centre the header logo --gt;  lt;img class="header-side-elem" id="header-logo" src="../../assets/images/logo.png" alt="logo"gt;  lt;h3 id="header-text"gt;Manage Customerslt;/h3gt;  lt;div class="header-side-elem" style="width:120px;"gt;lt;/divgt;  lt;/divgt;   lt;!-- the white rectange body contain--gt;  lt;div id="container-body"gt;      lt;div class="col-12"gt;   lt;br /gt;  lt;div class="input-group"gt;  lt;div class="col-md-7"gt;  lt;!-- Search bar components --gt;  lt;span id="search-icon" class="fa fa-search search-icon-span"gt;lt;/spangt;  lt;input class="search-input form-control" placeholder="Name" type="text"  name="Customer Name" id="search-customer-name"gt;  lt;/divgt;    lt;!-- button all of it--gt;  lt;fieldset class='btn-group'gt;   lt;button id="add" type="button" class="btn btn-primary btn custom mr-3" style="border-radius: 5px;"gt;Add lt;/buttongt;   lt;button id="view" type="button" class="dark view btn btn-primary btn custom mr-3 disabled change-row" style="border-radius: 5px;" disabledgt;View Detailslt;/buttongt;   lt;/fieldsetgt;      lt;div class="col-md-10"gt;   lt;div class="table-responsive"gt;  lt;table id="customer-list" class="table"gt;  lt;!-- Loading Spinner Div --gt;  lt;div id="loading-container"gt;  lt;pgt;Fetching all customer data...lt;/pgt;  lt;div id="loading-spinner"gt;    lt;/divgt;  lt;/divgt;  lt;tbodygt;    lt;/tbodygt;  lt;/tablegt;  lt;/divgt;    lt;!--AJAX call database--gt;  lt;scriptgt;    $.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. lt;querygt; 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 =gt; {  const table = document.querySelector("#customer-list tbody");     for (let i = 0; i lt; data.length; i  ) {  let row =     `    lt;trgt;  lt;td class="cell-customer-name"gt;lt;img src = "${data[i].Picture}" class="picture" gt;lt;/imggt;lt;/tdgt;  lt;td class="cell-customer-name" style="padding-right: 80px; padding-top: 10px; font-weight: bold; font-size: 18px;"gt;${data[i].Name}lt;/tdgt;  lt;/trgt;`;    table.insertAdjacentHTML('beforeEnd', row);    }  };   // Fetch method  const getData = async (url) =gt; {   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);  }  });  lt;/scriptgt;   lt;!-- Search bar function --gt;  lt;scriptgt;  $("#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)gt;=0)   );  })    };     })  lt;/scriptgt;  lt;!--Kendo UI Endless scrollbar --gt;  lt;scriptgt;  $("#customer-list").kendoGrid({  height: 550,  scrollable: {  endless: true,  },    columns: [  {   field: "Profile",   width: "12px",      },  {   field: "Name",   width: "100px"   },    ],   });    lt;/scriptgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/maingt;   lt;footergt;  lt;div class="overlay"gt;lt;/divgt;  lt;img src="../../assets/images/wave.png" alt=""gt;  lt;/footergt;      lt;scriptgt;  // This global value it used to properly highlight the page name for the navbar  const CURRENT_TAB = "manageCustomers";  lt;/scriptgt;  lt;!-- Feather replace to enable feather icons --gt;  lt;scriptgt;  feather.replace();  lt;/scriptgt;  lt;/bodygt; lt;/htmlgt;  

Это оригинальная тестовая картинка, которую я сделал

после того, как я потянул и толкнул, все стало так

там есть дополнительная полоса прокрутки, почему это происходит, нужна помощь, когда я просматриваю свой код и не нашел ничего, что я добавил или пропустил

Это делает мою дополнительную полосу прокрутки в моем div на данный момент исчезнувшей, чего я и хочу

 lt;div class="table-responsive" style="overflow: hidden;"gt;