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

为什么不使用过渡风格？

＆＃13;

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

＆＃13;

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

＆＃13;

如果你想将它绑定到滚动（例如鼠标滚轮）事件：

!!更新：添加了滚动锁定，并修改了border-radius修改throug事件。

＆＃13;

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";
});

＆＃13;

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

＆＃13;

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

＆＃13;

边界半径动画

1 个答案: