小编dam*_*mon的帖子

我不确定询问/搜索此问题的最佳方式:

当您单击锚链接时,它会将您带到页面的该部分,其中链接区域现在位于页面的顶部.我想锚链接把我发送到页面的那一部分,但我想在顶部有一些空间.就像在,我不希望它发送给我在非常顶部的链接部分,我想在那里有100个左右像素的空间.

这有意义吗？这可能吗？

编辑显示代码 - 它只是一个锚标记:

<a href="#anchor">Click me!</a>

<p id="anchor">I should be 100px below where I currently am!</p>

演示我的问题的视频：https : //i.imgur.com/L3laZLc.mp4

我有一个简单的应用程序，您可以在其中将卡片添加到 2 个不同的行。当卡片添加到一行时，我使用react-transition-group触发“输入”动画。

但是，我还react-beautiful-dnd安装了启用在行之间拖动卡片的功能，以及重新排列行本身的顺序。但是当一张卡片被移动到一个新的行，或者当这些行被重新排序时，一些卡片的“进入”动画火，这看起来很奇怪，不应该发生。

拖动时，不需要的动画将在

1. 卡片被拖到不同的行。

2. 一行被重新排序，两行有不同数量的卡片。

奇怪的是，不需要的动画在以下情况下不会发生

1. 卡片被拖动到其原始行内的新位置。
2. 行被重新排序并且行具有相同数量的卡片。

我想知道我怎么能有这么的react-transition-group时候动画将不会触发state通过使用修改react-beautiful-dnd。

我的问题的沙箱（App.js文件中的评论中有更多信息）：

https://codesandbox.io/s/get-beautiful-drag-to-not-trigger-transition-group-tc40w?fontsize=14&hidenavigation=1&theme=dark

视频演示问题

我有一堆可点击的组件，当点击它们时，会在一行中添加一个“卡片”。在台式机上，它运行良好，但在移动设备上（在 iPhone 上测试，对于 Android 平板电脑似乎不是问题），它需要连续点击同一按钮 2 次才能启动该onClick功能。

这些组件也有onMouseEnter/onMouseLeave效果，以控制全局状态，进而决定是否多个组件应该应用额外的 CSS（所以我不能让它成为一个简单的 CSS 悬停效果）。

我相信鼠标效果会干扰点击事件，但我不知道如何解决这个问题。这是该组件的相关代码：

const CardSource = ({ addCard, note, setHoveredNote, hoveredNote }) => {
  return (
    <Source
      onClick={() => addCard(note)}
      onMouseEnter={() => setHoveredNote(note)}
      onMouseLeave={() => setHoveredNote(null)}
      className={
        hoveredNote && hoveredNote.index === note.index ? "highlight" : null
      }
    >
      {note.letters[0]}
    </Source>
  );
};

此外，一旦按钮已经被挖掘了两次，悬停效果CSS“大棒”到该按钮，永不移动到另一个按钮。这似乎发生在 iPhone 和 Android 平板电脑上。我也希望这种事情不再发生。

我在沙箱中创建了此问题的工作演示，如果在移动设备上查看，您应该能够重新创建这些问题：https : //codesandbox.io/s/mobile-requires-2-taps-i9zri?file= /src/Components/CardSource/CardSource.js

我可以让媒体查询在常规styled-components组件中正常工作，但是当我尝试在keyframe（通过 import from styled-components）中使用它时，它似乎根本不起作用。

试图让 div 动画到特定位置，但是当窗口 < 800px 时改变结束位置，我尝试过：

import styled, { keyframes } from 'styled-components';

// ... further down ...

const slideAnim = keyframes`
  100% {
    top: 20px;
    left: 30px;
  }

  @media (max-width: 800px) {
    top: 70px;
    left: 50px;
    }

`;

我还尝试将媒体查询放在100%块中：

const slideAnim = keyframes`
  100% {
    top: 20px;
    left: 30px;

    @media (max-width: 800px) {
       top: 70px;
       left: 50px;
    }
  }
`;

我对我想要实现的目标做了一个有用的交互式演示（问题代码在第 24 行）：https : //codesandbox.io/embed/fragrant-star-m71ct

breakpoint如果需要，请随意更改800 …

我有一个样式组件渲染了 3 次，每次都有视差效果。

const ParallaxContainer = styled.section`
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  opacity: 0.3;
  bottom: ${props => props.bottomValue}px;
`;

视差是bottom通过非常昂贵的计算更新每个 scrollEvent的值来实现的。意思是，这个组件经常被重新渲染。

不出所料，我收到了警告Over 200 classes were generated for component styled.section. Consider using the attrs method, together with a style object for frequently changed styles.所以我尝试遵循建议，并将组件重构为：

const ParallaxContainer = styled.section.attrs(
  ({ bottomValue }) => ({
    style: {
      bottom: bottomValue + "px"
    }
  })
)`
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  opacity: 0.3;
`;

但我仍然遇到同样的错误。我究竟做错了什么？ …

我正在尝试react-spring在我的网站上创建视差效果。我希望视差容器成为整个网站的背景，并在底部加上一个 100vh“页脚”。这是我的意思的简单图表：

我的问题是，根据react-spring parallax docs，视差容器需要一个pages属性，该属性“确定每个页面占用100％可见容器的内部内容的总空间”。

根据我对此的理解以及我的测试，这意味着我必须根据 100% 视口高度的划分显式设置视差容器的整个高度。这意味着我不能只让视差容器包含我网站的内容，因为它没有预设高度，更不用说高度除以 100vh。

所以我的问题是，我可以让视差容器react-spring完全包含我的整个网站的内容，并在底部加上 100vh 吗？

这是我的问题的沙箱演示，pages在第 29 行设置了视差属性：https://codesandbox.io/embed/react-spring-pageheight-question-c12er

我有一个简单的react-beautiful-dnd 应用程序，其中有多行，您可以在自己的行中拖动组件。

我的问题是，当我在一行内拖动可拖动组件时，每一行都会发生内容移动和拖动组件消失的视觉效果。

这是展示我的问题的 gif：

这是一个 Codesandbox，其中包含该问题的交互式演示，并逐步重现该问题：

https://codesandbox.io/s/rbd-try-2-wgscc?fontsize=14&hidenavigation=1&theme=dark

我的问题的沙盒演示：https://codesandbox.io/s/jolly-fermat-j23w9

我正在尝试在我的 React 网站上实现一项功能，用户单击一个元素，然后播放音频。

在桌面上，这工作正常。但在 iOS 设备上，我遇到了“未处理的拒绝（NotAllowedError）”。此错误通常是由iOS 设备上自动播放媒体引起的。但是，在这种情况下，用户必须单击该元素才能启动音频，因此不应发生此错误。

我的怀疑是，由于组件在状态更改时重新渲染，React 不知道用户必须与站点交互才能触发音频。

这是基本代码：

// audio playing function, found on this stackoverflow question:
// /sf/ask/3338044181/
const useAudio = url => {
  const [audio] = useState(new Audio(url));
  const [playing, setPlaying] = useState(false);

  const toggle = () => setPlaying(!playing);

  useEffect(() => {
    playing ? audio.play() : audio.pause();
  }, [playing]);

  return [playing, toggle];
};

// url of audio is passed in as prop from App.js
const PlayAudio = ({ url }) => { …

我正在尝试在用户第一次访问我的网站时显示div.我很确定我是通过使用cookies来实现这一点的,我的经验有限,并且我很难理解.我在网上找到的大多数教程都只谈到让cookie让用户输入类似名字的东西,并让它在以后回忆起来,这根本不是我想要的.我只是希望cookie检查用户之前是否已访问过我的网站,如果没有,则显示通常隐藏的div.

这是我尝试过但未能开始工作的东西.

HTML:

<head>
   <script type="text/javascript" src="annoy.js"></script>
   <script type="text/javascript" src="scripts.js"></script>
</head>

...
<body>
    <div id="overbox3">
         <div id="infobox3">
              <p>This is the cookie box</p>
              <br />
              <p>it should only show once </p>
              <br/><br/>
         </div><!-- end infobox3 --> 
    </div> <!-- end overbox3 -->
</body>

CSS(因为这很好用,所以并不相关):

#overbox3 {
         position: fixed;
         top: 0px;
         left: 0px;
         width: 100%;
         height: 100%; 
         background: rgba(64, 64, 64, 0.5);
         z-index: 999999;
         display: none;
    }

    #infobox3 {
        margin: auto;
        position: absolute;
        left: 35%;
        top: 20%;
        height: 300px;
         width: 400px;
        background-color: white; …

默认情况下,当您在Shopify中将产品添加到购物车时,它会将您重定向到购物车页面.我想要做的是将它添加到购物车而不刷新页面.

Shopify在这里提供了一些如何执行此操作的说明:http://docs.shopify.com/support/your-website/themes/can-i-use-ajax-api ,但我对AJAX非常不熟悉,所以它给出了我有点麻烦.

他们提供了一些JavaScript文件(http://cdn.shopify.com/s/shopify/api.jquery.js?a1c9e2b858c25e58ac6885c29833a7872fcea2ba),其中包含一些函数,其原理是:

// -------------------------------------------------------------------------------------
// POST to cart/add.js returns the JSON of the line item associated with the added item.
// -------------------------------------------------------------------------------------
Shopify.addItem = function(variant_id, quantity, callback) {
  var quantity = quantity || 1;
  var params = {
    type: 'POST',
    url: '/cart/add.js',
    data: 'quantity=' + quantity + '&id=' + variant_id,
    dataType: 'json',
    success: function(line_item) { 
      if ((typeof callback) === 'function') {
        callback(line_item);
      }
      else {
        Shopify.onItemAdded(line_item);
      }
    },
    error: function(XMLHttpRequest, textStatus) {
      Shopify.onError(XMLHttpRequest, textStatus); …