修复按钮在特定滚动位置点击滚动位置

试图做这项工作的第3天......尝试一个纯CSS的方式做到这一点（没有iScrolls，没有niceScroll）。我想要的东西似乎很简单：滚动一个页面，点击一个按钮时，我希望页面停止滚动（将位置设置为固定），并将页面保持在该位置（而不是一直跳到顶部）。我想我可能有错误的东西与我的CSS但这里是我有：修复按钮在特定滚动位置点击滚动位置

 body{ 
      padding: 0; 
      margin: 0; 
      border: 0; 
     } 
     #wrapper{ 
      position: absolute; 
      z-index: 1; 
      width: 100%; 
      left: 0; 
      overflow: auto; 
     } 
     header{ 
      z-index: 2; 
      top: 0; left: 0; 
      width: 100%; 
      height: 50px; 
      background-color: black; 
      padding: 0; 
      text-align: center; 
      color: white; 
     }

HTML

<body> 
    <div id="wrapper"> 
     <header>Main News</header> 
     <ul>link with onclick</ul> 
     <ul>link with onclick</ul> 
     <ul>link with onclick</ul> 
     <ul>link with onclick</ul> 
     <ul>link with onclick</ul> 
     <ul>link with onclick</ul> 
     <ul>link with onclick</ul> 
     //a lot more li's with links 
    </div> 
    <script> 
    var x; 
     function something(){ 
      x = $('body').scrollTop(); 
      $('body').css({ 
       position: 'fixed' 
      }); 
     }); 
     function somethingelse(){ 
      $('body').css({ 
       position: '' 
      }); 
      $('body').scrollTop(x); 
     } 
    </script> 
</body>

我与警报检查，滚动位置被保存在变量x。我在这里做错了什么？

编辑1：我也想补充说，这些链接是动态添加的...也许这就是为什么它保持滚动到顶部的原因？没有固定的高度？

来源

2013-07-30 user2025469

你缺少'功能的东西（）''结束大括号。也许是错字？ –

@ user2025469查看本示例，禁用滚动而不重置内容位置选项[链接]（http://manos.malihu.gr/tuts/custom-scrollbar-plugin/disable_destroy_example.html） –

@FaisalSayed对不起，这是一个错字，我的原始代码中有右括号。 – user2025469

我不确定这是否正是你想要的，但我做了一个jsFiddle演示如何在用户单击链接后“锁定”（或切换）文档滚动。您可以创建基于这样的解决方案：

var ScrollHandler = (function() { 
    //Assumes jQuery has initialized 
    var hasScrollListener = false; 
    var toggleScrollLock = function() { 
     if(!hasScrollListener) { 
      $('body').css('overflow', 'hidden'); 
      $('.freezeScroll').css('color', '#ff0000'); 
     } 
     else { 
      $('body').css('overflow', ''); 
      $('.freezeScroll').css('color', '#0000ff'); 
     } 
     hasScrollListener = !hasScrollListener; 
    } 
    //Return a public toggle method 
    return { 
     toggleScrollLock: toggleScrollLock 
    }; 
}); 

$(document).ready(function() { 
    var scrollHandler = new ScrollHandler(), 
     links = $('.freezeScroll'); 
     links.each(function(i, element) { 
      $(element).on('click', function(e) { scrollHandler.toggleScrollLock(); }); 
     }); 
});

只要确保修改列表项目包括freezeScroll类：

<ul class="freezeScroll">link with onclick</ul>

http://jsfiddle.net/9uQZ8/10/

来源

2013-07-31 18:03:16

谢谢，它看起来像它会工作，但我最终弄清楚如何在一个页面内的多个div上实现iScroll。我需要做的是在包装器中添加另一个div，这样不会滚动正文，而是包装器中的内容。感谢您的帮助，我可以用它来做其他事情！ – user2025469

修复按钮在特定滚动位置点击滚动位置

回答

相关问题