如何增强scrollIntoView Javascript函数的使用

时间:2018-06-05 14:09:38

标签: javascript html angularjs

我们正在使用hilitor库突出显示段落中搜索到的单词。突出显示时,如果单词位于段落的底部或段落的中心,那么我们可以突出显示该单词,但页面不会滚动到该单词,我们需要明确向下滚动并查看突出显示的单词。任何人都可以帮我解决这个问题。我添加了代码段。

$scope.searchKey = function(keyword){
        var myHilitor2;
        myHilitor2 = new Hilitor("HighlightText");

        document.addEventListener("DOMContentLoaded", function(e) {
        myHilitor2.setMatchType("left");
        }, false);

        document.getElementById("search").addEventListener("keyup", function(e) {
          myHilitor2.apply(this.value);
        }, false);

        var element = document.getElementById("HighlightText");
        element.scrollIntoView();  // For scrolling to see the highlighted word (Not working)
    }

1 个答案:

答案 0 :(得分:0)

我还没有用过这个库。但是,Hilitor库在突出显示的单词中添加了一个名为hilitor的类。因此突出显示的单词没有HighlightText id,而document.getElementById("HighlightText")无法返回这样的元素。所以看起来你需要使用hilitor类来选择元素。像这样:

var element = document.getElementsByClassName( 'hilitor' )[ 0 ];
element.scrollIntoView();

示例:



document.getElementById( 'search' ).addEventListener( 'keyup', function() {
    var myHilitor = new Hilitor();

    myHilitor.apply( this.value );
    document.getElementsByClassName( 'hilitor' )[ 0 ].scrollIntoView()
}, false);

<script src="http://e-motiv.github.io/hilitor/hilitor.js"></script>
<link rel="stylesheet" type="text/css" href="http://e-motiv.github.io/hilitor/hilitor.css">

    <input type="text" id="search" placeholder="Search" style="background-color: #f7786b" />
    <br><br>
    <p class="fs-subheading fc-dark fw-bold lh-xs">
        <b>HOW WE COLLECT INFORMATION ON YOU</b>
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        In the course of providing you access to the Network, as well as Products and Services, Stack Overflow collects and receives personal information in a few ways. Often, you can choose what information to provide, but sometimes we require personal information
        from you to carry out certain activities such as account verification. This section details the ways in which we collect information from you and how that information is received.
    </p>
    <p class="fs-body2 lh-lg fc-medium fw-bold">
        Account Registration
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        Although the Network provides for anonymous and pseudonymous participation, in some instances in order to use certain Products or Services, we require account registration. This requires a name associated with your account, an email address at which we
        can contact you, and in some cases, additional information including, a contact address, a billing address, and a password to help secure your personal information.
    </p>
    <p class="fs-body2 lh-lg fc-medium fw-bold">
        Profile Information
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        When completing a public “profile” be it for use of the Network or our Products and Services, we may require you to share certain personally identifying information or sensitive information in required and optional profile fields. The name associated
        with your account, which you may review and change in your account settings, as well as reputation points are publicly displayed and connected to your activity on the Stack Overflow Network and via certain Products and Services such as our Talent
        and Teams platforms.
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        Other profile information may also be publicly displayed if you choose to complete certain elective components of the Account Registration options including, e.g., your Developer Story, display picture, affiliated role and company, your location and your
        preferred technologies (javascript, swift, sql-server, etc.), and some information is publicly displayed and required, such as how long you have been a member. Similarly, you may share additional information that is not required but will be displayed
        publicly at your election. If you are using the private Network (e.g., Stack Overflow for Teams), your account settings including, name, affiliated role and company, and other information may be shared with your private Network Team members designated
        as authorized users of your private Network account. While some of the public and private Network profile information is required, much of it is within your control as we describe herein and can be modified, updated, and restricted by you in your
        <a href="/users/email/settings/current">Email Settings</a>.
    </p>
    <p class="fs-body2 lh-lg fc-medium fw-bold">
        Information Collected Automatically
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        Stack Overflow receives and records information from your browser or mobile device when you visit the Network or use the Apps, such as your Internet Protocol (IP) address or unique device identifier. Cookies and data about which pages you visit on our
        Network allow us to operate and optimize the Products and Services we provide to you. This information is stored in secure logs and is collected automatically. We may combine this browser information with other information we collect about you.
        This information is used to keep the Products and Services secure, analyze and understand how our Products and Services are used, optimize such usage, provide advertising across the Network as well as certain Products and Services to personalize
        your experience, and to help connect you with potential job opportunities in the case of our recruiting Products and Services.
    </p>
    <p class="fs-body2 lh-lg fc-medium fw-bold">
        Location Information
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        When you use the Stack Overflow Network, and certain of our Products and Services, we collect location information about you including your IP address, your location, browser information, and how you came to the Stack Overflow Network. This is the case
        for individuals who have registered for an account, and non-members who engage with the Stack Overflow Network by visiting our website(s) but who have not completed an account registration. This information is collected for various purposes, including
        advertising, analytics and to serve content as it relates to certain Products or Services (e.g., Talent), as well as to provide you with localized content, recommendations, and marketing. You may revoke our permission to collect some of this data,
        including your location and browser information through your Account Settings, but this may limit functionality in some cases. Certain location information we collect is required for security and site functionality. We share this information with
        certain third-parties (e.g., talent recruiters, payment processors, and advertising providers) in order to provide you with our Products and Services.
    </p>
    <p class="fs-body2 lh-lg fc-medium fw-bold">
        Information from Third Parties
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        We may share personal information with third parties who provide services to Stack Overflow, such as payment processors, email delivery services, and advertising providers. Additionally, to improve user experience, we offer single sign-on solutions for
        account login and these third parties (including Facebook and Google) may receive information from these services when you elect to use them. When Stack Overflow shares your personal information and other collected information with third party
        service providers, we require that they use your information only for the purpose of providing services to us and that their terms are consistent with this privacy policy.
    </p>
    <p class="fs-body2 lh-lg fc-medium fw-bold">
        Advertising and Marketing Partners
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        When you register for an account, and when you interact with Stack Overflow, we and authorized third parties place cookies on you and your account activity as described in more detail within our <a href="/legal/cookie-policy">Cookies Policy</a>.
        We use this information to serve you certain advertising content. Similarly, we market our Products and Services to you and communicate important information and product opportunities to you. If you do not wish to receive direct marketing communications
        from us, you can tell us and remove yourself from our marketing communications via the unsubscribe and opt out options in our email communications and your Account Settings. If you do not wish to receive advertising promotions, you may restrict
        such activities in your Account Settings, but you should know that by doing so, you may reduce some functionality and you may not have access to certain features within our Products and Services (e.g., job recommendations on our Talent platform).
        For more information on how to control your account settings or to opt out of direct marketing campaigns, please visit your <a href="/users/email/settings/current">Email Settings</a>.
    </p>
    <p class="fs-body2 lh-lg fc-medium fw-bold">
        Analytics Information
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        Stack Overflow uses data analytics to ensure site functionality and to optimize our Product and Service offerings to you. We use web browser and mobile analytics to allow us to understand Network and Apps functionality. In doing so, we record information
        including, for example how often you visit the Network, how often you contribute content, Network and Apps performance data, errors and debugging information, and the type of activity you engage in while on the Network or in your use of our Products
        and Services. We may on occasion share this information with third parties for research or product and services optimization.
    </p>
    <p class="fs-body2 lh-lg fc-medium fw-bold">
        Billing Information
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        For Products and Services requiring payment, we collect a billing name, phone number, and email address. We also collect a billing and shipping address for invoicing purposes. If you elect to pay by credit card, Stack Overflow may engage a third party
        to securely process your payment. All payment processing is done through a PCI DSS compliant third party. If customers are paying by a credit card, their card details are vaulted through a third party payment gateway. Stack Overflow will store
        an encrypted token along with the last four digits of the credit card and the expiration month and year of the card and will not store or retain any other billing information about you.
    </p>
    <p class="fs-subheading fc-dark fw-bold lh-xs">
        WHAT INFORMATION WE COLLECT ON YOU
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        This section describes in further detail the information we collect on you and how we use that information broken down by our Products and Services offerings.
    </p>
    <p class="fs-body2 lh-lg fc-medium fw-bold">
        Public Network (Questions and Answers Content)
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        The Public Question and Answer Network (“public Network”) allows individual users to engage in a community to share their knowledge and expertise, and to acquire knowledge and expertise. It is community-moderated, and the content in the public Network
        is . . . public. To provide an optimal community experience, and to ensure Network security, we collect certain personal information.
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        We collect information such as your username, password, email address, IP address (collected at each site visit). This information is also used to identify individual users to the public Network and to award activities and attribute them to you. Your
        username and additional content you provide including your profile picture, question and answer content, and your reputation are visible publicly. Other limited information is visible to moderators, who have elevated access privileges, and may
        access content including your posts. For more information about moderators and their role in the Stack Overflow Network, please visit: <a href="/help/site-moderators">/help/site-moderators</a>. In addition, when you choose to use certain
        features such as our chat or support features, we collect a record of your communications with us and other third parties that are accessible to chat participants and certain authorized third parties. Other account information and usage information
        including your IP address and browser data may be used for diagnosis, security and Product and Service optimization.
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        Please be aware that when using the Public Question and Answer Network, you cannot revoke permission for Stack Overflow to publish and to allow others to have derivative rights to such public content once it is made public. The content you contribute
        on the public network is public, in perpetuity, and Stack Overflow loses direct control over such content when it is published on the open internet. This also means that if you post personal information about yourself, you do so at your own risk,
        including the risk of abandoning any privacy rights you had in such information.
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        Additionally, from time to time, Stack Overflow makes such public content available via compilation via the Creative Commons Data Dump and by providing public content to the Stack Overflow Network, you should be aware that such content, once public, cannot
        often be removed from public view even if it is removed from the Stack Overflow network and our servers.
    </p>
    <p class="fs-body2 lh-lg fc-medium fw-bold">
        Talent and Jobs
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        The Stack Overflow Talent platform allows for companies looking to hire and those seeking job opportunities to connect with each other and to engage in new employment opportunities. To optimize the recruitment experience, and to connect job seekers with
        jobs, we collect certain personal information on you the account holder (or account unregistered job seeker), and on the company and its authorized recruiters.
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        Whether you are a recruiter seeking to hire on our Talent platform, or a registered account holder using our Jobs platform while seeking employment opportunities, we collect certain account registration information on you. For job seekers on the Jobs
        platform, we collect your name, location, email and resume (where applicable) along with certain optional information including your phone number and a cover letter (where applicable). For company authorized users using our Talent Platform to
        recruit developers, we collect certain account registration information on you including your name, email, and affiliated company. For job seekers who chose to participate in our Jobs platform your public profile can be observed and collected
        by those looking to hire you. For company authorized users your profiles are visible to authorized users of the company account and your contact details are visible to job seekers via direct messaging on the Talent platform. The information we
        collect on you as a job seeker is also used by Stack Overflow to customize job recommendations. You may additionally opt-in to specific features that rely on personal information. For example, you may elect to provide personal information in your
        Developer Story which collects certain CV-like information and achievements including employment history which may be used for recruiting purposes.
    </p>
    <p class="fs-body2 lh-lg fc-medium fw-bold">
        Advertising Products
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        Stack Overflow partners with third parties to display advertisements on our public Network and within our Talent Platform. These partnerships provide third parties access to the developer community to promote themselves or services and to provide you
        with visibility into companies and third parties seeking to recruit you for employment opportunities, and for other purposes. In providing this opportunity, Stack Overflow and its third party partners may collect and use your personal information
        to tailor your advertising experience to suit your interests, skills, as well as to monitor your account activity in order to optimize our Products and Services.
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        We seek to limit what information advertisers and similar third parties have access to, as well as to ensure that your user experience on the public and private Stack Overflow network is not overwhelmed by advertising initiatives. However, our advertising
        products and services require us to collect certain personal and non-personal information on you, which includes:
    </p>
    <ul class="list-ls-disc">
        <li class="fs-body2 lh-lg fc-medium">
            Data from advertising technologies like cookies, web beacons, pixels, ad tags, and browser/device identifiers
        </li>
        <li class="fs-body2 lh-lg fc-medium">
            Information you have provided to us directly including profile information, your Developer Story, and in limited instances your job history
        </li>
        <li class="fs-body2 lh-lg fc-medium">
            Usage analytics including your visits to the Network, browsing and search history
        </li>
        <li class="fs-body2 lh-lg fc-medium">
            Information from our advertising partners (e.g., device type and location)
        </li>
    </ul>
    <p class="fs-body2 lh-lg fc-medium fw-bold">
        Stack Overflow for Teams
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        Stack Overflow for Teams allows you to share private content via authorized closed communities. When creating or joining a Team, we collect account registration information on you the Entity and you the individual. On behalf of the Entity, we collect
        Company or Entity name, Team Representative name, the names of authorized users, and you may elect to provide a Company or Team logo, trademark, or photo for account association purposes. As a participant in Stack Overflow for Teams, we require
        you to create an individual account on our public Network and we associate this account registration with your Team for account security purposes and to verify your identity. Account registration information as well as company or team affiliation
        information is displayed to authorized users of your Team.
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        In addition to account registration and company or team affiliation information, Stack Overflow collects certain application metadata for the purposes of maintaining and enhancing the Stack Overflow for Team product and related services we provide. This
        metadata is only made available to Stack Overflow authorized personnel and in some cases authorized third parties under a duty of confidentiality.
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        Any content you provide in the course of your use of the Stack Overflow for Teams product is shared privately with authorized users of your Team, and may include private questions and answers, votes, source code, and other sensitive data. Our collection
        of such content is solely to provide the Products and Services, and is provided pursuant to our <a href="/legal/terms-of-service/private">private Network Terms</a>. Stack Overflow personnel may not access such content except to the extent
        as may be required in response to a support request with your explicit permission, or when required for security or maintenance of the product or services. In such cases, Stack Overflow personnel will only access the minimum content necessary
        to resolve the issue and in accordance with the <a href="/legal/terms-of-service/private">private Network Terms</a>.
    </p>
    <p class="fs-body2 lh-lg fc-medium fw-bold">
        Enterprise
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        Our Enterprise level platform is a privately hosted Question and Answer forum for large corporate clientele. The collection of personal data is limited to account registration information and usage analytics for product optimization. For additional information
        regarding the collection and processing of your Enterprise offering, please contact your account representative.
    </p>
    <p class="fs-body2 lh-lg fc-medium fw-bold">
        Developer Survey
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        As the world’s largest developer community, Stack Overflow annually publishes a Developer Survey to provide key insights into the developer community, including demographic and certain personal information. Your participation in the Developer Survey as
        well as any other Stack Overflow survey is entirely voluntary. In order to provide meaningful insights into the developer community, Stack Overflow may collect sensitive data about you, including, but not limited to your gender, race, sexual orientation,
        immigration status, and your location. We consider this data to be among our most sensitive, and have taken elevated measures to protect such data as well as to de-identify your name and other personal information from such data. We restrict such
        data within Stack Overflow on a privileged basis to only those that need to see it and while we may share your personal information with certain third parties such as researchers, we do so only after imposing contractual obligations of confidentiality
        on such third parties and only where absolutely necessary for limited research purposes.
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        When we publish the Developer Survey, it is published as a compilation of anonymized data, which means that we take every effort to ensure that your information is understood in a statistical narrative decoupled from your personal identity.
    </p>
    <p class="fs-body2 lh-lg fc-medium">
        If you have any questions concerning the Developer Survey and our security measures to protect your sensitive personal data, please contact us at: <span>privacy (at) stackoverflow (dot) com</span>.
    </p>
&#13;
&#13;
&#13;