Question

我一直在尝试启用/禁用javascript滚动，

我设法禁用了滚动，但是未能使其恢复工作状态，

所以我尝试的是：

 function noscroll() {
    window.scrollTo(0, 0);
}

并且我尝试使用以下代码行添加和删除滚动

 window.removeEventListener("scroll", noscroll);

 window.addEventListener("scroll", noscroll);

非常感谢您的帮助

Answer 1

您的方法有效，那么您的问题是什么？

<div class="row">
<div class="input-daterange">
		<div class="col-md-4">
		<input type="date" name="start_date"       id="start_date" class="form-control" />
	  </div>
 <div class="col-md-4">
 <input type="date" name="end_date" id="end_date"    class="form-control" />
		</div>      
		</div>
</div>
 <table class="table" id="rapport">
          <thead>
                   <tr>
                      <th>Id</th>
                      <th>Reférence</th>
                      <th>Date</th>
                   </tr>
            </thead>
        <tbody>
              <tr>
                    <td>1</td>
                    <td>XZDF</td>
                    <td>2018-10-26 15:04:13</td>
                   </tr>
               <tr>
                    <td>2</td>
                    <td>XZDpo</td>
                    <td>2018-10-23 15:04:13</td>
               </tr>
               <tr>
                    <td>4</td>
                    <td>XZDmoQSD</td>
                    <td>2018-09-10 15:04:13</td>
               </tr>
     </tbody>
  </table>

function noScroll() {
  window.scrollTo(0, 0)
}

forbid.addEventListener('click', () => {
  window.addEventListener('scroll', noScroll)
})

allow.addEventListener('click', () => {
  window.removeEventListener('scroll', noScroll)
})

div { 
  background-color: #f0f0f0;
  height: 150vh;
  line-height: 150vh;
  text-align: center;
}

Answer 2

您的方法似乎起作用，如下所示：

function noscroll() {
  window.scrollTo(0, 0);
}

document.getElementById('enable').addEventListener('click', () => {
  window.removeEventListener("scroll", noscroll);
});
 
document.getElementById('disable').addEventListener('click', () => {
  window.addEventListener("scroll", noscroll);  
});

div {
  background:pink;
  height:1000px;
  padding:50px;
}

header {
  position:fixed;
  top:0;
  left:0;
  z-index:1;
}

<header>
<button id="enable">Enable scrolling</button>
<button id="disable">Disable scrolling</button>
</header>
<div>
Prevent scroll via Javascript (window.scrollTo)
</div>

另一种值得考虑的方法是通过“隐藏”任何内容溢出来更新overflow元素的document.body属性。这具有删除滚动条的副作用，这反过来又阻止了滚动：

 document.getElementById('enable').addEventListener('click', () => {

    // Remove overflow value from document body to restore default scrolling
    document.body.style.overflow = '';
 })

 document.getElementById('disable').addEventListener('click', () => {
    // When scrolling is disabled, auto scroll to top of screen
    window.scrollTo(0, 0);

    // Apply overflow:hidden to document body to prevent scrolling
    document.body.style.overflow = 'hidden';
 })

div {
  background:pink;
  height:1000px;
  padding:50px;
}

header {
  position:fixed;
  top:0;
  left:0;
  z-index:1;
}

<header>
<button id="enable">Enable scrolling</button>
<button id="disable">Disable scrolling</button>
</header>
<div>
Prevent scroll via CSS
</div>

上面显示的基于CSS的方法的主要优点是它不受“抖动”滚动行为的影响，而以前的“ pure-javascript”方法是显而易见的。

如何使用Java启用/禁用鼠标滚动

2 个答案: