logo
down
shadow

differentiate between a scroll caused by .scrollLeft and a user trying to scroll in an HTML page


differentiate between a scroll caused by .scrollLeft and a user trying to scroll in an HTML page

By : Heart ProPlugin
Date : October 18 2020, 11:12 AM
Does that help You can set a flag before changing scrollLeft and clear it afterwards, then check the flag in the scroll event.
Since Javascript is run on the UI thread, it is not possible for the user to scroll while your code is running.
code :


Share : facebook icon twitter icon
(jQuery) Scroll event.. I want to scroll the document to the point specified if the user scroll the page

(jQuery) Scroll event.. I want to scroll the document to the point specified if the user scroll the page


By : user958250
Date : March 29 2020, 07:55 AM
should help you out The scrollTop property only accepts an integer (not pixels). Omit the px and it should be fine.
code :
$(window).scroll(function() {
    $('body').get(0).scrollTop = 3000; // note that this does only work if body has overflow
    // if it hasn't, use window instead
});
How can I differentiate a manual scroll (via mousewheel/scrollbar) from a Javascript/jQuery scroll?

How can I differentiate a manual scroll (via mousewheel/scrollbar) from a Javascript/jQuery scroll?


By : Shu
Date : March 29 2020, 07:55 AM
To fix this issue UPDATE: , Try this function:
code :
$('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(e){
 if ( e.which > 0 || e.type == "mousedown" || e.type == "mousewheel"){
  $("html,body").stop();
 }
})
Differentiate between mouse wheel scroll or scrollbar scroll?

Differentiate between mouse wheel scroll or scrollbar scroll?


By : DeviTech
Date : March 29 2020, 07:55 AM
I wish this helpful for you Something like this might work for you but it is not the best solution.
If the a wheel event occurs right before the scroll event, then the scroll is done with the wheel otherwise it is done with using something else then the wheel. There is a slight time difference between both events that are triggered thats why I use a threshold currTime - lastWheelTime > 30.
code :
$('.test').on('scroll wheel DOMMouseScroll mousewheel', function(e) {
    var lastWheelTime,
        currTime = (new Date()).getTime(); 

    if( e.type === 'scroll' ) {
        lastWheelTime = $(this).data().lastWheelTime || 0;

        if( currTime - lastWheelTime > 30 ) {
           $('.info').text('no wheel');
        } else {
           $('.info').text('with wheel');
        }

    } else {
        $(this).data().lastWheelTime = (new Date()).getTime(); 
    }
});
.test {
    width: 200px;
    height: 300px;
    border: 1px solid red;
    overflow: auto;
}
 
.inner {
    height: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="info"></div>
<div class="test">
    <div class="inner"></div>
</div>
Slide div on and off the page on scroll without interrupting the animation when the user continues to scroll

Slide div on and off the page on scroll without interrupting the animation when the user continues to scroll


By : user3598798
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , This works: JSFIDDLE link
It's all about the Callback Functions!
code :
var amountScrolled = 50;
var loopRunning = 0;

$(window).scroll(function() {
    if ($(window).scrollTop() > amountScrolled){
        if(loopRunning === 0){
            animateSlide("0px",500); 
        }
    } else {
        if(loopRunning === 0){
            animateSlide("-400px",500);
        }
    }
});

function animateSlide(px, time){
    loopRunning = 1;
    $('#slide').stop().animate({marginLeft:px}, time, function(){
        loopRunning = 0;
    });
}
Collision occurred in html page horizontal scroll and recyclerview vertical scroll

Collision occurred in html page horizontal scroll and recyclerview vertical scroll


By : Waldemar Kaczkowski
Date : March 29 2020, 07:55 AM
like below fixes the issue Finally, I have figured out the solution about my question. The part of the WebView is in the top of the view. so I use this to intercept the touch event:
code :
float touchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop()

webView.setOnTouchListener((View v, MotionEvent event) -> {
    if (!scrollFlag && event.getY() < getHeight() / 2) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downX = event.getX();
                downY = event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                if (Math.abs(event.getY() - downY) < touchSlop && Math.abs(event.getX() - downX) > touchSlop) {
                    getParent().requestDisallowInterceptTouchEvent(true);
                    scrollFlag = true;
                }
                break;
        }
    }
    if (event.getAction() == MotionEvent.ACTION_UP)
        scrollFlag = false;

    return false;
});
Related Posts Related Posts :
  • Debug React Microservice Application with webpack and tailor
  • Can get requests placed by <a> tags include data?
  • how to make amChart column with 3 axis vertical
  • Only filter Array for the defined parameters. ignore empty parameters
  • Generating React/Express Routes in Javascript
  • es6 filter an array of objects by an array of filter objects
  • Can we pause a delay in jQuery?
  • Selectors are executed before component is rendered
  • javascript basic collision function for high school project
  • getElementById on page with multiple instances of same component
  • My code doesnt add letters to string in cycle for discord.js
  • Change Color of a selected item in an array
  • cancel all subscriptions in componentWillUnmount
  • Unable to set timezone in Highcharts graph
  • Call function in function event (onChange), from Select created in Leaflet and Vue.js
  • React Hooks - What's happening under the hood?
  • Redux Testing - getState() TypeError: Cannot read property 'startDateIndex' of undefined
  • JavaScript: Re-organize canvas rendering in a functional manner
  • Using Jest and Enzyme, how do I test a function passed in through props?
  • Spacing and size of horizontal bars in a Victory stack?
  • How to detect if a file exists in JavaScript accounting for 404 handler
  • Difference between readFileSync and using promisify on top of readFile with async/await
  • Promise.all() problem using setTimeout(), state not updating
  • Using Array class methods for HTMLCollection DOM traversel in ES6
  • Azure and MicrosoftGraph Api deploy throw "Error: Method Not Allowed"
  • Angular 2 router ngIf dynamic route
  • How to get the checked tree structure values using angular2-tree plugin using angular
  • Grabbing parts of a date in a different timezone with moment
  • Getting a particular attribute from a JSON data
  • Testing React Redux Async Actions with fetch-mock - "Cannot read property 'then' of undefined"
  • good practice to change page without reloading
  • How do I change background color of one frame with another frame?
  • cdk-drop is not a known element
  • Storing AWS credentials in the frontend
  • Round up decimal to the first two significat digits
  • enzyme test contains for container
  • regex non converting character after symbol to upper case
  • React VictoryBar style difficulties
  • Vue call method of another component
  • How do I properly use reportValidity() when I want to show an error bubble for just one input field?
  • A js event for js Chrome extension (work on every tab had loaded a page)
  • How to see if url is mobile only
  • tabulator update column data
  • Entity cannot be found error in Dynamics 365 for Outlook App
  • Split up json-data fetched with axios in to a clickable list-item that redirects to page
  • Change moment date string into proper timezone
  • How is the module exported in Winston package?
  • Javascript toggle array button
  • JavaScript/Angularjs - View a template according to a JSON configuration, multiple ng-repeat
  • Javascript promise then inside a class
  • Using a variable increment to create new variables in Javascript
  • iterate through a html table and get row number for each row in javascript
  • How to design store (state of app) so we change data in store directly without actions, reducers?
  • How do I call 2 or more asynchronous methods in Actions on Google intent fulfilment V2
  • Mapping a different icon depending on property value in React
  • Expanding the width of div after the content exceeds the height of the div
  • React.js pending 4 min before gets response from Express.js backand restful api
  • I have to press a button twice to fill react state from firebase realtime database
  • Simple Class Function Boolean Output
  • Google AdSense "Valuable Inventory: No Content", on a homepage?
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org