Question

我正在制作 Cookie Banner ，并努力解决以下问题：新用户访问该页面后，“ Cookie标语”将加载并禁用滚动。

我使用jQuery，JS和CSS body { overflow: hidden }尝试了不同的方法，但是它们都不起作用。只要用户未单击“接受”，我都不知道如何禁用滚动。有人有想法吗？

我的想法是：

onload - show cookie Banner 

if not clicked on "accept"
    overflow: hidden;
else
    default scrolling experience

Answer 1

这应该可以解决您的问题：

$(document ).ready(function() {
    let body = $('html, body')

    // when the document is ready disable page scrolling by default
    body.css('overflow', 'hidden');

    // when click on your banner button enable page scrolling
    $('#your-button-id-here').click(()=>
        body.css('overflow', 'auto'); 
    ) 
});

Answer 2

您可以在body元素上尝试position: fixed;。

body {
  position: fixed;
  height: 200vh;
  background: green;
}

<body>
  <button onclick='document.body.style.position =  "initial";this.style.display = "none"'>Accept</button>
</body>

Answer 3

如果您完全控制HTML文档的结构，则可以使用纯CSS来实现，而无需JavaScript。

技巧是创建一个复选框input元素来存储通知状态（隐藏或可见）。然后，您可以使用该输入的标签作为用户单击接受的按钮。当用户单击标签时，复选框已选中，您可以使用:checked选择器隐藏该通知并重新启用内容包装上的滚动。

要实现此目的的主要要求是，您可以使input元素成为可滚动内容包装的兄弟，并使其在HTML标记中的包装之前出现。

请注意，您可能需要做一些额外的工作，以使屏幕阅读器，键盘等可以访问伪按钮。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  font-size: .8em;
}

.notice-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  background-color: #daedf3;
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 1;
  transition: opacity 300ms;
}

.notice-content label {
  border: 1px solid black;
  padding: .2em .4em;
  cursor: pointer;
}

.notice-overlay {
  content: "";
  position: fixed;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.2);
  opacity: 1;
  transition: opacity 300ms;
}

.content {
  max-height: 100vh;
  overflow-y: auto;
  padding: .5em;
}

#notice-accepted {
  display: none;
}

#notice-accepted:checked ~ .notice .notice-content,
#notice-accepted:checked ~ .notice .notice-overlay {
  opacity: 0;
  pointer-events: none;
}

#notice-accepted:not(:checked) ~ .content {
  overflow-y: hidden;
}

<input id="notice-accepted" type="checkbox" />

<div class="notice">
    <div class="notice-content">
        Please accept cookies...
        <label for="notice-accepted">Accept</label>
    </div>
    <div class="notice-overlay"></div>
</div>

<div class="content">
    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
</div>

Answer 4

我建议的最简单方法是使用html在body和jQuery上添加/删除一个类，如下所示：

$('html,body').addClass('noscroll');

随时随地删除该课程。

然后，在您的CSS中，添加以下代码：

html.noscroll,body.noscroll{
    height:100%;
    overflow:hidden;
    width:100%;
}

现在，要启用/禁用文档滚动取决于您。

如果未单击按钮，如何禁用滚动

4 个答案: