Javascript Chrome-隐藏滚动内容，导致正文和其他元素向上滚动

我把我的网页分成两个垂直部分。其中，左面板用于呈现书籍类别列表，右面板用于呈现与选定类别关联的书籍。我们也有按钮从左侧隐藏特定类别

<div class="content">
  <div class='col-3'> 
    <h3> Category </h3>
    <div class="category-container dev-category-list">
    </div>
  </div>
  <div class='col-9'> 
    <h3> Books </h3>
    <div class="books-container dev-books-list">
    </div>
  </div>
</div>

类别
书

Javascript代码：

var categories = ['category-1','category-2','category-3','category-4','category-5','category-6','category-7'];
var books = {'cat1':['1984','Dracula','Twilight','Holes','Homes','Uglies','Othello'],'cat2':['Dracula','Twilight','1984','Holes','Homes','Uglies','Othello'],'cat3':['1984','Twilight','Holes','Homes','Dracula','Uglies','Othello'],'cat4':['Othello','1984','Dracula','Uglies','Holes','Twilight','Eclipse'],'cat5':['Hamlet','Macbeth','Othello','Holes','Night','Twilight','Eclipse'],'cat6':['1984','Hamlet','Dracula','Uglies','Othello','Night','Twilight'],'cat7':['1984','Hamlet','Macbeth','Uglies','Othello','Holes','Night']};

setup_UI_elements();

function setup_UI_elements(){
  appendCategories();
  renderBooks('1');
  addCategListner();
  addBtnListner();
}

function appendCategories(){
    container = $('.dev-category-list');
   for(var i=0; i< categories.length; i++){
     categHtml = "<div data-categ-id='"+ (i+1) + "' class='categ'> "+categories[i]+" </div>";
     container.append(categHtml)
   }
}

function renderBooks(categ_id){
   container = $('.dev-books-list');
   container.html('');
   categ_key = 'cat'+categ_id
   $('.categ').removeClass('selected');
   $('div.categ[data-categ-id='+categ_id+']').addClass('selected');
   for(var i=0; i< books[categ_key].length; i++){
     bookHTML = "<div data-book-id='"+ (i+1) + "' class='book'> "+books[categ_key][i];
     bookHTML += "<button type='button' data-book-id='"+ (i+1) + "' data-categ-id='"+ (books[categ_key].length-i) + "' class='btn'> Hide Categ "+ (books[categ_key].length-i) +"</button> </div>";
     container.append(bookHTML);
   }
}

function addCategListner(){
  container = $('.dev-category-list');
  container.click(function(e){
    target = $(e.target);
    $('.categ').removeClass('selected hidden');
    target.toggleClass('selected');
    categ_id = target.data('categ-id');
    renderBooks(categ_id);      
  });
}

function addBtnListner(){
  container = $('.dev-books-list');
  container.click(function(e){
    target = $(e.target);
    if(target.hasClass('btn')){
      categ_id = target.data('categ-id');
      target.toggleClass('added');
      if(target.hasClass('added'))
        target.html('Show Categ'+categ_id)
      else
        target.html('Hide Categ'+categ_id)

        categDiv = $('.dev-category-list div[data-categ-id='+categ_id+']')
      categDiv.toggleClass('hidden');
    }
  });

}

var分类=['category-1'、'category-2'、'category-3'、'category-4'、'category-5'、'category-6'、'category-7']；
var books={'cat1'：['1984'，'Dracula'，'Twillight'，'Holes'，'Homes'，'Uglies'，'Otherlo'，'cat2'：['Dracula'，'Twillight'，'1984'，'Holes'，'Homes'，'Uglies'，'Otherlo'，'cat3'：['1984'，'Twillight'，'Holes'，'Homes'，'Dracula'Uglies'，'Otherlo'，'Otherlo'，'cat4'：['Otherlo'，'1984'，'Uglies'，'Otherlo'，'Twillight'，'5''[《哈姆雷特》，《麦克白》，《奥赛罗》，《洞》，《夜》，《暮光之城》，《月食》，《第六类》：[《1984》，《哈姆雷特》，《德古拉》，《乌格里斯》，《奥赛罗》，《夜》，《暮光之城》，《第七类》：[《1984》，《哈姆雷特》，《麦克白》，《乌格里斯》，《奥赛罗》，《洞》，《夜》）；
设置用户界面元素（）；
函数设置\u UI\u元素（）{
附件类别（）；
renderBooks（'1'）；
addCategListner（）；
addBtnListner（）；
}
函数appendCategories（）{
容器=$（'.dev类别列表'）；
对于（变量i=0；i

当我试图从左面板隐藏一个不再在折叠上方的类别时，它会滚动右面板而不是左面板

我在Firefox和Safari中工作得很好

---

JS Bin:

这对我来说效果很好！试着点击右边的最后一个按钮，你会看到右边的面板正在滚动。我用windows/mac chrome浏览器检查过。你用的是什么浏览器？chrome:58.0.3029.110 mac。我在chrome、firefox和opera上测试过，没有滚动，但有一个滚动条。