Change dropdown on window scroll

Question

When I change select it will scroll accordingly to the div and it is working fine, But how to I change select on document scroll ?

$("select").change(function(){
  var divid = $(this).val();
  $('html, body').animate({
        scrollTop: $("." + divid).offset().top
    }, 2000);
});

div{
  height:300px;
}





div1



div2



div3



div4

user_2630817 · Answer

You can put all the options into array and check it with the window scroll, this way you can have dynamic divs and also you can check them all at once.

$("select").change(function() {
  var divid = $(this).val();
  $('html, body').animate({
    scrollTop: $("." + divid).offset().top
  }, 2000);
});

var output = [];

$.each($("select option"), function(key, value) {  
  output.push(value.value);
});

$(window).on('scroll', function() {
  //checking if it is already in animation mode or not
  if (!$("html,body").is(':animated')) {
    var filtered = output.filter(a => {
      return $(this).scrollTop() >= $("." + a).position().top
    });

    //checking which options are meeting with the requirement
    if (filtered.length > 0) {   
      //selecting the last one.
      $("select").val((filtered[filtered.length - 1]))
    }
  }
});

div {
  height: 300px;
}

select {
  position: fixed;
  top: 0
}





  div1



  div2



  div3



  div4

user_7810468 · Answer

You could use the Intersection Observer API to change your select when the div enters the viewport.

UPDATE: A good valid answer has already been provided to solve the problem, I am just providing the example below for educational purpose for people interested in examples of Intersection Observer and scrollIntoView.

Be cautious that the example provided is not fully supported by all browsers and should not be used on production environment (current snippet has been tested with Chrome 71):

var dropdown = document.querySelector('#dropdown');

var targets = document.querySelectorAll('.target');

var options = {
  root: document.querySelector('#scrollable'),
  rootMargin: '0px',
  threshold: 0
}

var callback = function(entries, observer) { 
  entries.forEach(entry => {
  // If the element enters the viewport...
    if (entry.isIntersecting) {
      // ... then update the dropdown.
      dropdown.value = entry.target.id;
    }
  });
};

var observer = new IntersectionObserver(callback, options);

targets.forEach(target => observer.observe(target));

dropdown.addEventListener('change', () => {
  var element = document.getElementById(dropdown.value);
  element.scrollIntoView(true);
});

#scrollable {
  border: 1px solid #ccc;
  height: 150px;
  overflow: auto;
  width: 300px
}




  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et dolor a leo semper suscipit. Donec quis lobortis mauris, quis finibus neque. Integer justo mi, faucibus vel fermentum at, convallis eget dui. Quisque pharetra velit in lacus ornare, a blandit tortor tempus. Nulla sit amet sapien turpis. Morbi ut dapibus lacus, id tristique ligula. Phasellus vel neque vitae metus congue vulputate. Cras laoreet euismod nisl sed aliquet. Maecenas eu facilisis magna. Etiam et tempor justo, vel dictum sem.
  Pellentesque gravida, massa ac venenatis volutpat, erat neque ornare risus, convallis dignissim ante erat a felis. Suspendisse erat ligula, egestas non ante eu, iaculis aliquam ante. Aliquam vestibulum mattis erat, sed convallis quam rutrum fringilla. Nulla hendrerit libero sed nibh faucibus, nec pharetra felis tempor. Vestibulum in sem augue.
  Suspendisse potenti. Nullam blandit dapibus eros, sed semper quam eleifend in. Nunc elementum ligula eget volutpat imperdiet. Sed cursus rhoncus semper. Pellentesque dignissim nibh a facilisis viverra. Sed eu dictum quam. Suspendisse consectetur libero orci, quis ornare metus tincidunt eget. Fusce congue lectus ligula, non aliquet urna ullamcorper non. Aliquam leo ipsum, scelerisque ut tortor sodales, vestibulum aliquet mauris. Pellentesque sit amet sapien pulvinar diam malesuada euismod in at sapien. Mauris eleifend laoreet nibh vitae interdum. Suspendisse eget velit a tortor egestas fermentum. Nunc in libero felis.
  Integer rhoncus fringilla viverra. Vivamus tempor mi quis laoreet porta. In maximus tincidunt tincidunt. In viverra a est dictum vulputate. Curabitur eu sagittis odio, sed molestie massa. Donec ac neque vel mauris pellentesque blandit id non nisl. Curabitur egestas, enim semper viverra aliquam, nunc orci pretium diam, egestas dictum elit purus eu nisl. Cras aliquet dignissim fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id viverra tellus, sit amet gravida orci. Aliquam elementum posuere augue.

user_8616043 · Answer

Even if I recommend to use a plugin to avoid any inconsistencies, a quick solution is shown below. It extracts the index of the focused div, and changes the value of the select dropdown. However, this solution is only limited to focus events.

 $('div[value^="div"]').on('focus',function(e){
        let selectedIndex = $(this).prop('class').match(/\d+/g)[0] - 1;
        $('select').prop('selectedIndex', selectedIndex);
});

Change dropdown on window scroll

3 Answers