JavaScript平滑滚动在safari浏览器中不起作用

Question

我创建了一个小菜单订单应用程序，我使用水平滚动条添加了5个菜单类别，即甜点、沙拉、泰国面条等。如果我点击沙拉或任何类别向左和向右移动的位置在铬工作良好。我检查safari浏览器不工作水平滚动。我所缺少的。你能检查一下并告诉我吗。

html:

<div class="menu" id="menu">
<div class="topnav sticky" id="stickyMenu"><span data-id="appetizers" id="nav1" class="cat-nav">Appetizers</span><span data-id="desserts" id="nav2" class="cat-nav">Desserts</span><span data-id="pizza--classic-11-inches-" id="nav3" class="cat-nav active">Pizza (Classic 11 inches)</span><span data-id="salad" id="nav4" class="cat-nav">Salad</span><span data-id="thai-noodles" id="nav5" class="cat-nav">Thai Noodles</span></div>
<!-- <div class="row filter">
<input type="text" id="gsearch" class="form-control gsearch"  placeholder="Search within this Menu...">
</div> -->
</div>

js代码：

$(document).on('click', ".topnav .cat-nav", function(e) {
$(".topnav .cat-nav").removeClass("active");
$(this).addClass("active");
var target = $(this).data("id");
$('html, body').animate({
scrollTop: ($("#"+target).offset().top - 50)
}, 500);
});
$(window).scroll(function() {
//get current sroll position
var scrollPosition = $(window).scrollTop(); 
//get the position of the containers
var s=["appetizers","desserts","pizza--classic-11-inches-","salad","thai-noodles"];
for (i=0; i<s.length; i++) {
if (scrollPosition >= ($("#"+s[i]).offset().top) - 190) {
$("#nav"+(i+1)).addClass("active");  
$("#nav"+(i+1)).siblings().removeClass("active");  
// $('.cat-nav').scrollLeft(myScrollPos);
var element = document.querySelector(".active");
element.scrollIntoView({behavior: "smooth" ,inline: "center"});
// $("#nav"+(i+1)).css({behavior: "smooth" ,inline: "center"});  
}
}
});

Answer 1

将overflow: auto添加到sticky或topnav类：

.sticky {
overflow: none;
overflow-x: auto;
display: block;
} 

这可能会奏效。