Question

在滚动主/细节容器（div）时，如何控制侧栏或左侧div的导航/滚动。虽然我在Div上没有任何单独的卷轴。我想在主窗口滚动而不是div上控制此行为，因为我不想将任何滚动应用于div。查找下面的详细信息 -

我尝试使用Bootstrap“container-Fluid”但无法获得任何预期的结果。
我使用Angular指令移动了smth滚动。但是当我滚动窗口时，我无法看到滚动事件，但是当我滚动右侧div时滚动事件被触发，这当然我不想使用，因为我不想显式使用div而不是我想要使用主路由器插座滚动。

现在问题是如何设置偏移并决定我现在在哪个部分并相应地移动指针或左div的滚动。（注意在我的问题中我使用了固定大小的div，但在原始代码中，大小不固定。并且只有标识符是与左侧类别部分匹配的部分开头的ID）。现在如何在指令上使用DOCUMENT组件并突出显示左侧类别菜单的相应元素。

角度指令 - ＆gt;

import { Component, Inject, OnInit } from "@angular/core";
import { DOCUMENT } from '@angular/platform-browser';
import {Directive, HostListener} from '@angular/core';
@Directive({
    selector:'[scroller]'
})

export class ScrollingDirective{
    public navIsFixed: boolean = false;
    constructor( @Inject(DOCUMENT) private document: Document) { }
    @HostListener('scroll') scrolling() {
        console.log('Scrolled1...');
      
    }

    @HostListener("window:scroll", [])
    onWindowScroll() {
        console.log('Scrolled2...');
    }
}

enter image description here HTML页面 - ＆gt;

<style>
    .full-width{
    width: 100%;
    height: 50%;
}

    .double-width{
    width:100%;
    height: 50%;
}   
    #section1 {
        color: #fff;
        background-color: #1E88E5;
    }

    #section2 {
        color: #fff;
        background-color: #673ab7;
    }

    #section3 {
        color: #fff;
        background-color: #ff9800;
    }

    #section41 {
        color: #fff;
        background-color: #00bcd4;
    }

    #section42 {
        color: #fff;
        background-color: #009688;
    }

    @media screen and (max-width: 810px) {
        #section1, #section2, #section3, #section41, #section42 {
            margin-left: 150px;
        }
    }
</style>

<div class="full-width" scroller>
    <div class="double-width">
    <div data-spy="scroll" data-target="#myScrollspy" data-offset="20" scroller>
    <div class="container" scroller>
        <div class="row">
            <nav class="col-sm-3" id="myScrollspy">
                <ul class="nav nav-pills nav-stacked" scroller>
                    <li class="active"><a href="#section1">Section 1</a></li>
                    <li><a href="#section2">Section 2</a></li>
                    <li><a href="#section3">Section 3</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#section41">Section 4-1</a></li>
                            <li><a href="#section42">Section 4-2</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <div class="col-sm-9">
                <div id="section1">
                    <h1>Section 1</h1>
                    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                </div>
                <div id="section2">
                    <h1>Section 2</h1>
                    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                </div>
                <div id="section3">
                    <h1>Section 3</h1>
                    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                </div>
                <div id="section41">
                    <h1>Section 4-1</h1>
                    <p>Try to scroll this section and look at the navigation list while scrolling!</p>
                </div>
                <div id="section42">
                    <h1>Section 4-2</h1>
                    <p>Try to scroll this section and look at the navigation   
                             list while scrolling!</p>
                </div>
            </div>
        </div>
    </div>
</div>    
</div>
</div>

Answer 1

经过一些试验和错误的方法我决定，我达成了解决方案，它在所有浏览器上运行得非常好。 Chrome和Edge针对＆＃34; JavaScript For 循环＆＃34;进行了不同类型的实施。但它很好地识别行为并修复它......请找到以下步骤在Angular＆＃34;＆＃34;中实现自定义滚动。 1.在子屏幕上的父div上应用指令选择器（即滚动条），必须使用此滚动。 2.申请课程＃34; scrlSpy＆＃34;到侧面导航栏链接或项目的所有元素，并提供id＆＃34; sidenav＆＃34;到sidenav容器。 3.同样适用＆＃34; contentSpy＆＃34;类到右侧主容器的每个部分。并将id应用于容器，即＆＃34; contentCol＆＃34;。这就是html页面上的内容。 5.现在只需复制下面的指令代码，并通过引用您的组件或共享组件开始使用它。注意： - 确保您已将第一个元素标记为活动状态，并使用＆＃34; active＆＃34;类。如果类名不同，则以其他方式扭曲代码。

＆＃13;

#include <iostream>
#include <vector>
#include <numeric>
#include <sstream>
#include <cmath>
#include <chrono>
#include <utility>
#include <algorithm>
#include "keeper.h"

int compute_result(std::istream &input) {
    int n;
    double k;
    input >> n;
    input >> k;
    std::vector<int> c(200001);

    for (int i = 0; i < n; i++)
    {
        int b;
        input >> b;
        c[b]++;
        c[b + 1000]--;
    }

    int maxRequests;

    std::partial_sum(c.begin(), c.end(), keep_max(maxRequests));

    return std::ceil(maxRequests / k + 0.199999999);
}

int main() {
    using std::cin;
    std::stringstream input1{ "3 2 1000 1010 1999" };
    std::stringstream input2{ " 2 1 0 1000" };

    std::cout << "First result: " << compute_result(input1) << "\n";
    std::cout << "Second result: " << compute_result(input2) << "\n";
}

＆＃13;

在Angular4中使用<routeroutlet> - 在主/详细容器的滚动上，如何控制侧栏或左侧div的导航/滚动

1 个答案: