Question

我正在使用一个WordPress主题，它可以作为一个页面的应用程序，但我没有看到任何角色库包含在任何地方。

我设法为主题中未包含的主页创建了自定义wordpress页面模板。在这个页面中，我有一行使用jQuery custom content scroller的3个可滚动列来替换默认浏览器的滚动条。

当您访问该网站时，它将看起来应该如此。但是当您导航到另一个页面然后返回主页时，自定义滚动条会停止显示并恢复为默认值。

我在控制台中没有看到任何错误。

您可以在此处查看该网页的实时版本：http://utopic.vision/demo

我通过将类mCustomScrollbar添加到该部分来初始化自定义滚动条，就像这样。

<div class="row" style="height: 100% !important; margin-left: 0 !important; margin-right: 0 !important;">

    <div class="col-md-5 no-padder" style="overflow-y: hidden !important; height: 100% !important;">
        <section class="vbox animated fadeInUp">
            <section class="scrollable hover mCustomScrollbar">
                some data
            </section>
    </div>

    <div class="col-md-4 no-padder" style="overflow-y: hidden !important; overflow: hidden !important; height: 100%;">
        <section class="vbox">
            <section class="scrollable hover mCustomScrollbar">
                some data
            </section>
    </div>

    <div class="col-md-3 no-padder" style="overflow-y: hidden !important; height: 100%;">
        <section class="vbox">
            <section class="scrollable hover mCustomScrollbar">
                some data
            </section>
    </div>

</div>

在functions.php内，这就是主题如何将css和js库添加到标题中。我在最后手动添加了自定义滚动条库。

function musik_scripts() {
    wp_enqueue_style( 'musik-style', get_stylesheet_uri() );

    wp_enqueue_script( 'musik-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '', true );

    wp_enqueue_script( 'musik-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array('jquery'), '', true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }

    wp_enqueue_style('animate', get_template_directory_uri().'/assets/css/animate.css');
    wp_enqueue_style('font-awesome', get_template_directory_uri().'/assets/css/font-awesome.min.css');
    wp_enqueue_style('simple-line-icons', get_template_directory_uri().'/assets/css/simple-line-icons.css');
    wp_enqueue_style('bootstrap', get_template_directory_uri().'/assets/css/bootstrap.css');
    wp_enqueue_style('app', get_template_directory_uri().'/assets/css/app.css');
    wp_enqueue_style('font', get_template_directory_uri().'/assets/css/font.css');
    **wp_enqueue_style('scrollbar', get_template_directory_uri().'/assets/js/scrollbar/jquery.mCustomScrollbar.min.css');**


    wp_enqueue_script('bootstrap', get_template_directory_uri() . '/assets/js/bootstrap.js', array('jquery'), '', true );
    wp_enqueue_script('app', get_template_directory_uri() . '/assets/js/app.js', array('jquery'), '', true );
    wp_enqueue_style('jplayer', get_template_directory_uri().'/assets/js/jPlayer/jplayer.flat.css');
    wp_enqueue_script('jplayer', get_template_directory_uri() . '/assets/js/jPlayer/jquery.jplayer.min.js', array('jquery'), '', true );
    wp_enqueue_script('playlist', get_template_directory_uri() . '/assets/js/jPlayer/add-on/jplayer.playlist.min.js', array('jquery'), '', true );
    wp_enqueue_script('storage', get_template_directory_uri() . '/assets/js/jquery.storageapi.min.js', array('jquery'), '', true );
    wp_enqueue_script('player',   get_template_directory_uri() . '/assets/js/player.js', array('jquery'), '', true );
    wp_enqueue_script('playlists',   get_template_directory_uri() . '/assets/js/playlist.js', array('jquery'), '', true );
    **wp_enqueue_script('scrollbar',   get_template_directory_uri() . '/assets/js/scrollbar/jquery.mCustomScrollbar.concat.min.js', array('jquery'), '', true );**
    wp_localize_script('player', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )), '', true);

    wp_enqueue_style( 'wp-mediaelement' );
    wp_enqueue_script( 'wp-mediaelement', false, array('jquery'), false, true );

    wp_enqueue_script('tile',   get_template_directory_uri() . '/assets/js/masonry/tiles.min.js', array('jquery'), '', true );
    wp_enqueue_script('tile-init',   get_template_directory_uri() . '/assets/js/tile.js', array('jquery'), '', true );

    if( get_theme_mod( 'hide-loading' ) == 0 ){
        wp_enqueue_script('nprogress',   get_template_directory_uri() . '/assets/js/nprogress/nprogress.js', array('jquery'), '', true );
        wp_enqueue_style('nprogress', get_template_directory_uri().'/assets/js/nprogress/nprogress.css');
        wp_enqueue_script('pjax',   get_template_directory_uri() . '/assets/js/jquery.pjax.js', array('jquery'), '', true );
        wp_enqueue_script('pjaxinit',   get_template_directory_uri() . '/assets/js/ajax.js', array('jquery'), '', true );
    }
}
add_action( 'wp_enqueue_scripts', 'musik_scripts' );

Answer 1

我修好了。

经过一番挖掘后，我意识到主题是使用pAjax插件来实现单页应用功能（如Angular）。

所以我所要做的就是在ajax.js中使用jQuery（而不是HTML）重新初始化自定义滚动条，这是一个pAjax组件。

刚刚将此添加到负责发出ajax请求的ajax.js中。

downcase

当我访问其他页面时，jQuery自定义内容滚动条消失了

1 个答案: