jquery - 边框半径动画

Question

我正在 Squarespace 上构建一个网站，我试图让第一页的边框半径在滚动时发生变化。动画在 Squarespace 预览中完美运行，但如果我在另一台计算机上或在 Chrome 上以隐身模式运行，它就无法运行。边界半径甚至没有改变它只是保持平坦。我的代码中有什么冲突吗？

CSS:

#intro{
  border-top-left-radius: 0% !important;
  border-top-right-radius: 0% !important;
  width: 150vw;
  overflow: hidden;
  right: 26vw;
  height: 800px;
} 

JQuery:

<script>
var hHeight = $("html").height(),
    radius  = 100;

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop(),
      percent   = 150 - ((150*scrollTop)/hHeight) * 2;
  $("#intro").css("border-radius", percent + "%");
});
</script> 

Answer 1

为什么不直接使用过渡样式呢？

#main {
  background: white;
  height: 20px;
  width: 20px;
  border: 1px solid black;
  transition: border-radius ease 0.5s;
}
#main:hover {
  border-radius: 22px;
}

<div id="main"> </div>

如果你想将它绑定(bind)到滚动(例如鼠标滚轮)事件:

!!更新:添加了滚动锁定，并通过事件修改了边框半径修改。

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}
function disableScroll() {
  window.onwheel = preventDefault;
}
function enableScroll() {
  window.onwheel = null;
}
var elem = document.getElementById('main');
elem.onmouseover = disableScroll;
elem.onmouseout = enableScroll;
console.log(elem);
elem.addEventListener("wheel", function(e) {
	var delta = e.deltaY || e.detail || e.wheelDelta;
  var base = elem.style.borderRadius;
  if (base) {
  	base = parseInt(base.match(/(\d+)px/)[1]);
  } else base = 0;
  var NEW = base;
  if (delta > 0) 
    NEW = base +2;
  else 
    NEW = base -2;
  elem.style.borderRadius = NEW+"px";
});

body{
    height:200px;
}

#main {
  background: white;
  height: 60px;
  width: 60px;
  border: 1px solid black;
  transition: border-radius ease 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main"></div>