如何解决IE 11和10中的平滑滚动打破了CSS变换矩阵
我有一个移动菜单,该菜单使用转换矩阵对身体内容进行动画处理。基本上,一旦单击菜单按钮,菜单就会滑过,并且将一个类应用于将其滑到一边的内容。
// Toggle Mobile Menu
$("#menu-toggle").click(function() {
// closed menu
if ($("#menu__display").hasClass("header__navigation__show")) {
$("#menu__display").removeClass("header__navigation__show");
$("#push__content").removeClass("side__push").addClass("side__collapse");
} else {
// open menu
$("#menu__display").addClass("header__navigation__show");
$("#push__content").removeClass("side__collapse").addClass("side__push");
}
});
.side__push {
transform: matrix(1,1,300,0);
transition: 1s ease;
}
动画效果良好,直到您在移动菜单中单击锚点链接为止,该链接会触发平滑滚动并将焦点更改为滚动元素。出于某种原因,在IE11和10中,这破坏了转换矩阵,并且正文内容跳回到了窗口的左侧。
// Smooth scrolling
// Select all links with hashes
$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').not('[data-lity]').click(function (event) {
// On-page links
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
var headerHeight = ($("header").height()) + 58;
var scrollToPosition = (target.offset().top) - headerHeight;
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html,body').animate({
scrollTop: scrollToPosition
},1000,function () {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) {
return false;
}
else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
}
;
});
}
}
});
我不知道怎么了。发生这种情况时,CSS不会更新,实际上,在IE9中它可以正常工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。