Javascript 如何关闭scroll上的Shopify Ajax购物车？

我已经使用成功设置了Shopify Ajax购物车，因此如果您单击购物车之外的任何位置（或使用关闭按钮），我的购物车将关闭

我想知道，如果用户在向购物车添加项目后开始滚动，是否可以关闭购物车。我发现了另一个主题——它实现了这一点，但JS不太好，我不知道从哪里开始

我已经意识到，当购物车打开时，网站的其他部分是不可滚动的，所以我想知道这是否就是为什么我无法滚动它的原因

我当前的一些代码如下所示，请参阅与我相同设置的木材框架：

主题.液体-

{% comment %}
Ajaxify your cart with this plugin.
Documentation:
    - http://shopify.com/timber#ajax-cart
{% endcomment %}
{% if settings.ajax_cart_enable %}
  {{ 'handlebars.min.js' | asset_url | script_tag }}
  {% include 'ajax-cart-template' %}
  {{ 'ajax-cart.js' | asset_url | script_tag }}
  <script>
    jQuery(function($) {
      ajaxCart.init({
        formSelector: '#AddToCartForm',
        cartContainer: '#CartContainer',
        addToCartSelector: '#AddToCart',
        cartCountSelector: '#CartCount',
        cartCostSelector: '#CartCost',
        moneyFormat: {{ shop.money_format | json }}
      });
    });

    jQuery('body').on('ajaxCart.afterCartLoad', function(evt, cart) {
      // Bind to 'ajaxCart.afterCartLoad' to run any javascript after the cart has loaded in the DOM

      timber.RightDrawer.open();
    });

//Something I have tried...

    $(window).on('scroll', function() {
    // when timer is triggered:
    timber.rightDrawer.close();
    });
</script>
{% endif %}

{%comment%}
A使用此插件将您的购物车升级。
文档：
- http://shopify.com/timber#ajax-推车
{%endcomment%}
{%if settings.ajax\u cart\u enable%}
{{'handlebar.min.js'|资产| url |脚本(标记)}
{%include'ajax购物车模板'%}
{{'ajax cart.js'|资产| url |脚本(标记)}
jQuery（函数（$）{
ajaxCart.init({
formSelector:“#AddToCartForm”，
cartContainer:“#cartContainer”，
addToCartSelector:“#AddToCart”，
cartCountSelector:“#CartCount”，
CartCost选择器：“#CartCost”，
moneyFormat:{{shop.money_format}json}
});
});
jQuery（'body'）.on（'ajaxCart.afterCartLoad'，函数（evt，cart）{
//绑定到'ajaxCart.afterCartLoad'以在将购物车加载到DOM中后运行任何javascript
木材。右抽屉。打开（）；
});
//我试过的东西。。。
$（窗口）.on（'scroll'，function（）{
//触发计时器时：
木材。右抽屉。关闭（）；
});
{%endif%}

---

任何帮助都将不胜感激

您可以通过jQuery使用scroll事件进行此操作

$(window).on('click', function(){
    $('.cart').animate({height: '50px'}, function(){
       $(window).on('scroll', function(){
           $('.cart').animate({height: '0'});
           $(window).off('scroll');
        }); 
    }); 
});

编辑：html的溢出被设置为“溢出：隐藏”，因此，不再进行滚动。您需要找到代码，单击cart按钮，带有“overflow hidden”的类将添加到html标记中。然后，您可以使用上述功能设置滚动事件的动画

---

注意：单击事件是您的按钮“添加到卡”被单击的位置。

您也可以在抽屉关闭按钮上模拟单击事件

正如其他答案所指出的，如果你使用的是基于木材的主题，你需要删除

.js-drawer-open {
  overflow: hidden;
}

从

assets/timber.scss.liquid

开始，以使滚动工作正常

我曾经添加了一个计时器来停止滚动事件一直触发并影响性能

var scrollTimer = null;
$(window).scroll(function () {
    if (scrollTimer) {
        clearTimeout(scrollTimer);   // clear any previous pending timer
    }
    scrollTimer = setTimeout(handleScroll, 100);   // set new timer
});

function handleScroll() {
    scrollTimer = null;
    if ($('body').hasClass("js-drawer-open")) {
        $(".js-drawer-close").trigger("click");
    }
}

---

您好，谢谢您的回复，我不需要购物车向上滑动，我需要在用户在身体上滚动时关闭购物车。您将“//让购物车向上滑动”放在这里，我会在这里放置某种触发器来关闭购物车吗？还有，这段代码需要放在哪里？在我的theme.liquid文件中？非常感谢！这似乎只是使购物车更加向左移动？你知道为什么会这样吗？当然，你需要根据自己的需要调整动画功能。请记住，本论坛旨在帮助您获得正确的开端，而不是分享完整的解决方案。您应该能够自己找到正确的动画值：）我确实根据自己的需要调整了类和动画设置，但似乎没有任何效果。我是否正确地将此代码段放置在结束标记中？之后我意识到我需要禁用溢出：滚动。我可以从这里开始，谢谢你的指导。