• node_modules---使用body-scroll-lock解决弹窗时touchmove透传到body的问题


    场景: 在实际业务中我们经常会遇到需要从页面底部弹窗(银行卡弹窗,选择职业,选择地址等)弹窗上面内容允许滚动条
    遇到的问题:我们在弹窗上滚动的时候会触发body的滚动事件,需要禁止body的滚动

    自己实现的时候,通常会在弹窗出现的时候给body添加overflow:hidden或者添加position:fixed, 但是页面会回到顶部或者弹窗的滚动也被禁止掉了

    后来发现了body-scroll-lock第三方库专门解决了这个问题

    body-scroll-lock的使用

    1- 安包

    yarn add body-scroll-lock

    2- react中的使用范例

    // 1. Import the functions
    import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
     
    class SomeComponent extends React.Component {
      targetElement = null;
     
      componentDidMount() {
        // 2. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav).
        // Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element).
        // This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired.
        this.targetElement = document.querySelector('#targetElementId');
      }
     
      showTargetElement = () => {
        // ... some logic to show target element
    // 3. Disable body scroll
        disableBodyScroll(this.targetElement);
      };
     
      hideTargetElement = () => {
        // ... some logic to hide target element
     
        // 4. Re-enable body scroll
        enableBodyScroll(this.targetElement);
      };
     
      componentWillUnmount() {
        // 5. Useful if we have called disableBodyScroll for multiple target elements,
        // and we just want a kill-switch to undo all that.
        // OR useful for if the `hideTargetElement()` function got circumvented eg. visitor
        // clicks a link which takes him/her to a different page within the app.
        clearAllBodyScrollLocks();
      }
     
      render() {
        return <div>some JSX to go here</div>;
      }
    }
  • 相关阅读:
    iOS NSString中的搜索方法rangeOfString
    iOS 远程推送通知
    iOS PushMeBaby日志提示SSLwrite():-36 94
    iOS [[NSBundle mainBundle] pathForResource:@"" ofType:@""]无法获取到文件
    iOS 申请测试用的远程推送证书
    数据结构与算法学习笔记(五)
    iOS 上传新版本到AppStore时报错ITMS-90034
    数据结构与算法学习笔记(四)
    数据结构与算法学习笔记(三)
    iOS开发日记49-详解定位CLLocation
  • 原文地址:https://www.cnblogs.com/xiaqin/p/13403331.html
Copyright © 2020-2023  润新知