相关疑难解决方法(0)

Angular + jQuery,当图像的src改变时触发滚动

当我按下右/左箭头时,我试图使用jQuery滚动到特定的缩略图(在模态内)(当用户点击图像时会弹出模态).当用户点击缩略图时,我能够使滚动工作,但当变量current2改变时,我无法触发点击.任何帮助,将不胜感激.

我是Angular.js的新手,所以如果有其他建议来改进代码,我们将不胜感激.

<body ng-app="mediaGallery" class="ng-cloak" ng-controller="mediaGalleryCtrl">

    <div class="row">
        <div class="small-8 columns">
            <div class="small-3 columns">
                <div ng-repeat="obj in array">
                    <div ng-if="$index < 4">
                        <img ng-click="changeMainMedia($index, 'current1')" class="thumbnail" ng-src="{{obj.src}}" />
                    </div>
                    <div ng-if="$index == 4">
                        <div class="thumbnail" data-open="media-gallery">
                            <label class="text-right success label">{{array.length - 3}} +</label>
                        </div>
                    </div>
                </div>

            </div>

            <div class="small-9 columns">
                <img data-open="media-gallery" class="main-gallery" ng-src="{{array[current1].src}}" />
            </div>
        </div>
    </div>



    <div ng-keydown="key($event)" id="media-gallery" class="small reveal text-center media-gallery" data-reveal>
        <div class="modal-body">
            <div class="main-media">
                <img class="main-gallery media-gallery-main" ng-src="{{array[current2].src}}" />
                <hr>

                <div …

Run Code Online (Sandbox Code Playgroud)

html javascript jquery angularjs

Nod*_*.JS

2017 01-07

11
推荐指数

1
解决办法

728
查看次数

velocity-react - 在组件更新后动画化scrollTop

我正在写一个简单的"控制台",以聊天方式显示消息.消息从底部出现,然后向上移动.

我有工作代码,但是每次添加新的"li"时,我都想通过将容器滚动到底部来设置显示消息的动画.

当前代码:

import React from 'react';
import { render, findDOMNode } from 'react-dom';


export default React.createClass({
    componentDidUpdate : function(){
        var node = findDOMNode(this);
        node.scrollTop = node.scrollHeight;
    },
    render() {
        return (
            <ul id="log">
            {
                this.props.messages.map(function(message, index){
                    return <li key={index}>[{message.time.format('HH:mm:ss')}] {message.action}</li>
                })
            }
            </ul>
        )   
    }
})

Run Code Online (Sandbox Code Playgroud)

该messages道具来自父组件和商店.

我发现这个速度插件:https://github.com/twitter-fabric/velocity-react我无法弄清楚如何在我的情况下使用它.所有的例子似乎都不适用(或者我只是不理解它们).

我很反应,一些概念仍然让我困惑,所以请理解.

我不想使用jQuery.

javascript animation reactjs velocity.js

Pio*_*iak

2016 03-04

9
推荐指数

1
解决办法

2335
查看次数

Ionic2 - 以编程方式滚动离子滚动

我有一个页面,其中有两个可滚动的视图彼此相邻:

<ion-content>
   <ion-scroll></ion-scroll>
   <ion-scroll></ion-scroll>
</ion-content>

Run Code Online (Sandbox Code Playgroud)

我想以编程方式滚动第一个,但似乎scrollTo只是一个离子内容的方法(我当然不能滚动,我需要第二个独立)

有什么方法可以解决这个问题吗？

更新:添加了一个plnkr来显示我需要的东西

angularjs ionic-framework ionic2 angular

S. *_*ose

2019 01-21

8
推荐指数

1
解决办法

2079
查看次数

如何滚动以生成本机 JavaScript？

我正在将代码转换为直接使用DOM API 而不是使用jQuery，有一个具有滚动功能的场景。我无法直接使用 DOM API 转换为版本：

jQuery 代码：

function scrollToResult() {
    var $height1 = $('.class1').outerHeight();

    $('body, html').stop().animate({
        scrollTop : $('.class2').offset().top - $height1;
    }, 200);
}

Run Code Online (Sandbox Code Playgroud)

纯 JavaScript 代码：

function scrollToResult() {
    var $height1 =document.querySelector('.class1').offsetHeight;

  //error
    document.querySelector('body, html').stop
}

Run Code Online (Sandbox Code Playgroud)

我知道stop不是任何 JavaScript 方法。这里该如何进行？

javascript jquery dom scroll

Adi*_*tya

2018 10-05

4
推荐指数

1
解决办法

1866
查看次数