javascript - 如何在 JavaScript 中只为 Chrome 增加 margin-right 值？

Question

我需要一些帮助来实现我的网站。我有一个用 JS 制作的动画 div，它从右向左滑入屏幕(使用按钮和 margin-right 操作)。它在 Firefox 中工作正常，但在 Chrome 中不行:在 margin-right 上具有相同的值，显示时我完全在 FF 中看到 div，但在 GG 中不行，我只看到它的一部分。

隐藏div也会出现同样的问题；该值不够高，所以仍然有可见的部分。我在 CSS 中使用“-webkit-margin-end”为 Chrome 设置了更高的值，这有助于隐藏，但当显示时问题仍然存在。我想我必须在我的脚本中添加一个 Chrome 选项，因此“margin-right”值(或“-webkit-margin-end”值？)在动画时也可以增加，但是我实际上找不到我的请求的任何答案。

这可能是因为我还不够好，无法将其应用到我的代码中，这就是为什么我们会非常感谢您的帮助。
此外，有没有办法在页面加载时滑动？我希望当用户进入网站时 div '打开'。

这是我的一段代码:

/* CSS */


/* div */
#texte {
background-color:#FFFFFF;
border-left:0.5px solid #000000;
color:#000000;
font-size:0.9vw;
font-weight:normal;
font-family:"Proza Libre", sans-serif;
top:0;
bottom:0;
right:0;
margin-right:-125px;
-webkit-margin-end:-350px;
width:19.4%;
padding:1vw 0.6vw 1vw 1vw;
float:right;
position:fixed;
display:block;
z-index:1000;
overflow-x:hidden;
overflow-y:auto;
}


/* button */
#plus {
bottom:2.5vw;
right:2.5vw;
position:fixed;
color:#000000;
text-align:center;
font-family:serif;
font-size: 2.5vw;
font-weight:normal;
line-height:2.5vw;
text-decoration:none;
cursor:pointer;
z-index:1000;
border: 0.8px solid #000;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width:2.5vw;
height:2.5vw;
}


/* SCRIPT */


jQuery.easing.def = 'easeOutBounce';

$('#plus').click(function() {
if($(this).css("margin-right") == "125px")  {
$('#texte').animate({"margin-right": '-=125'}, 'slow');
$('#plus').animate({"margin-right": '-=125'}, 'slow');
}
else {
$('#texte').animate({"margin-right": '+=125'}, 'slow');
$('#plus').animate({"margin-right": '+=125'}, 'slow');
}

});

火狐:

Chrome:

Answer 1

与其为每个特定于浏览器的错误寻找临时解决方案，不如尝试寻找一种方法，使您的代码在每个浏览器上都以相同的方式工作。

我会避免操纵边距。相反，我建议使用一个具有固定宽度的主 DIV，然后在内部添加另一个带有所需填充的 DIV。然后使用 right 属性制作动画。

检查此代码片段，看看此演示是否适合您。

function togglePanel() {
  if (parseInt($('#main').css('right')) == 0) {
    // get the current width (+ horizontal padding) (+ the border size * 2)
    width = $('#main').width() + parseInt($('#main').css('padding-left')) + parseInt($('#main').css('padding-right')) + 2;
    $('#main').animate({"right": -width}, 'slow');
  } else {
    $('#main').animate({"right": 0}, 'slow');
  }
}

$('#toggleMain').on('click', function() {
  togglePanel();
});

$(document).ready(function() {
  togglePanel();
});

* {box-sizing: border-box;}

#main {
  background:blue;
  position:absolute;
  padding:10px;
  right:-222px;
  top:0px;
  bottom:0px;
  width:200px;
  border:1px solid red;
  }

#inner {
  width:100%;
  padding:10px;
  border:1px solid green;
  background:orange;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main"><div id="inner">Here goes the text<br/>and more text</div></div>
<button id="toggleMain">Toggle</button>