Question

我在浏览器窗口一侧有一个标签，点击后使用jquery将其滑入并显示。问题是，因为我有绝对的位置，它溢出身体，我似乎无法让它停止。当它被jQuery拉入时它不再溢出。只有当它被隐藏时。

JS：

        $(tabs).click(function(event) {
        event.preventDefault();
        var block = '#block-webform-client-block-12';
        if($(tabs).hasClass("isDown")) {
            $(block).animate({ right: '+=380'}, 500 ),
            //$(block).css({ position: 'absolute' });
            $(tabs).removeClass("isDown");
            $('.block-webform .quote-tab.open').hide();
            $('.block-webform .quote-tab.close').show();
        } else {
            $(block).animate({ right: '-=380' }, 500 )
            //$(block).css({ position: 'fixed'});
            $(tabs).addClass("isDown");
            $('.block-webform .quote-tab.open').show();
            $('.block-webform .quote-tab.close').hide();
        }
        return false;
    });

CSS：

#block-webform-client-block-12 {
position: absolute;
top: 20%;
right: -380px;
background: $button-color;
padding: 15px;
width: 350px;
color: white;
z-index: 99;
@include zen-grid-container();
.quote-tab {
    position: absolute;
    top: 0;
    left: -46px;
}

HTML：

    <div id="block-webform-client-block-12" class="block block-webform contextual-links-region last even">
<h2 class="block-title">
  Get a Quote
</h2>
<article class="node-12 node node-webform node-promoted contextual-links-region view-mode-full node-by-viewer clearfix" about="/get-quote" typeof="sioc:Item foaf:Document">
  <div class="field field-name-body field-type-text-with-summary field-label-hidden">
    <div class="field-items">
      <div class="field-item even" property="content:encoded">
        <img src="/sites/domain.com/files/close-quote-tab.png" class="quote-tab close"> <img src="/sites/domain.com/files/open-quote-tab.png" class="quote-tab open">
        <p>
          Fill out this form to request a quote or set up an appointment. For more information, <strong>call 123-456-7890</strong>.
        </p>
      </div>
    </div>
  </div>
  <form class="webform-client-form" enctype="multipart/form-data" action="/get-quote" method="post" id="webform-client-form-12" accept-charset="UTF-8">
    ...form_components...

截图 broken_absolute

我想这样做，以便当表单在屏幕外时只显示选项卡而您无法滚动查看表单的其余部分

Answer 1

您将需要overflow-x: hidden这种或那种方式。

如果您确定没有其他内容会溢出页面宽度，您可以在body本身上进行设置。如果没有，您需要使用overflow-x: hidden的某种包装器。

http://jsfiddle.net/aZU3S/1

Answer 2

您是否尝试过设置溢出？

overflow-x: scroll;

侧面标签位于绝对和溢出的窗口？

2 个答案: