边框半径动画

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>

如果要将其绑定到滚动(例如鼠标滚轮(事件：

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

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>