小编Gol*_*naz的帖子

有没有办法加快 的行为速度scrollTo？

我在黑暗中刺了一下speed，duration但不起作用！

window.scrollTo({
    top: 1000,
    behavior: "smooth"
});

参考：

• https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

当在 FabricJS 画布上单击对象本身时，我无法水平翻转或镜像对象。

我接近了，但是当它被调整大小时它也在镜像对象，这是我不想要的。

我想我需要在第一次单击时将“flipX：true”属性添加到对象，然后在下次单击时删除该属性，依此类推，每次单击。或者也许这太复杂了，使用我不知道的flipX函数可以更容易地完成。

我确实找到了一个翻转对象的小提琴，但它是单击按钮而不是对象本身。

我正在努力解决这个问题：\

我的小提琴

HTML：

<canvas id="canvas" width="400" height="300"></canvas>

JS：

var canvas = this.__canvas = new fabric.Canvas('canvas');

canvas.on('object:selected', function() {
  toggle('flipX');
});

// create a rectangle
var rect = new fabric.Rect({
  left: 50,
  top: 50,
  width: 100,
  height: 50,
  angle: 20,
  fill: 'red'
});
canvas.add(rect);
canvas.renderAll();

当我点击页面上的任何地方时,我一直试图让我的菜单关闭,除了在菜单中.

我设法实现这一点,当菜单中的链接被点击时,通过给它提供与菜单按钮相同的onclick功能,但我没有成功点击菜单关闭它.

http://codepen.io/anon/pen/LEvdmW

JS

function setVisibility(id) {
  var targetButton;
  switch( id ) {
    case "layer":
      targetButton = "button";
      break;
  }
  if (document.getElementById(targetButton).value == 'Close') {
    document.getElementById(targetButton).innerHTML = 'Open';
    document.getElementById(targetButton).value = 'Open';
    document.getElementById(id).style.display = 'none';
  } else {
    document.getElementById(targetButton).innerHTML = 'Close';
    document.getElementById(targetButton).value = 'Close';
    document.getElementById(id).style.display = 'inline';
  }
}

HTML

<button name="type" id="button" onclick="setVisibility('layer')">Open</button>
<div id="layer"><a onclick="setVisibility('layer')"> Hello</div>

CSS

#layer {
    position: absolute;
    left: 8px;
    top: 50px;
    background-color: #989898;
    width: 280px;
    height: 100px;
    padding: 10px;
    color: black;
    display: none;
}


button …

当关闭单独的div时,我在从元素中删除类时遇到问题.

您可以从下面的代码和我的小提琴中看到

我有一个jquery选项卡式菜单,默认情况下没有任何打开.单击选项卡时,将打开内容并突出显示选项卡.但是,如果再次单击该选项卡并关闭内容,则选项卡将保持突出显示.

我尝试过removeClass但没有成功.

JS

$(document).ready(function() {
  $(".tabs-menu a").click(function(event) {
    event.preventDefault();
    $(this).parent().addClass("current");
    $(this).parent().siblings().removeClass("current");
    var tab = $(this).attr("href");
    $(".tab-content").not(tab).css("display", "none");
    $(tab).slideToggle();
  });
});

HTML

<div id="tabs-container">
  <div class="tabs-menu">
    <div><a href="#tab-1">One</a></div>
    <div><a href="#tab-2">Two</a></div>
    <div><a href="#tab-3">Three</a></div>
    <div><a href="#tab-4">Four</a></div>
  </div>
  <div class="tab">
    <div id="tab-1" class="tab-content">
      Hello
    </div>
    <div id="tab-2" class="tab-content">
      Number Two
    </div>
    <div id="tab-3" class="tab-content">
      Tab 3
    </div>
    <div id="tab-4" class="tab-content">
      Bye
    </div>
  </div>
</div>

我以为这会很容易，但是我被卡住了。

我的代码正在执行并且忽略了setTimeout。

我得到了元素的滚动宽度，然后说，当i小于宽度（flavoursScrollWidth）时，每秒水平滚动1px。

但这不是正在发生的事情，它几乎立即执行每个像素移动。

我还尝试将代码从load事件中取出，并将setTimeout从while循环中取出。然后创建一个包含while循环的函数，并在setInterval中调用该函数。没有帮助。

const flavoursContainer = document.getElementById("flavoursContainer")
const flavoursScrollWidth = flavoursContainer.scrollWidth

window.addEventListener("load", () => {
  let i = 0
  while (i < flavoursScrollWidth) {
    setTimeout(flavoursContainer.scrollTo(i, 0), 1000)
    console.log(i)
    i++;
  }
})

.container {
  width:300px;
  overflow-x:scroll;
  white-space: nowrap;
}

<div class="container" id="flavoursContainer">
    This is a really long sentence to demo my code, it's just going on and on. Still going. I should have used some default placeholder text but I've started now so I'll keep …